在beforeunload中更改DOM在Chrome中

是否可以在beforeunload處理程序中更改DOM？ Chrome瀏覽器似乎應用了DOM修改後用戶在瀏覽器關於離開頁面的提醒中按下「停留」，並且我想隱藏頁面的一部分而此提醒是可見的。在beforeunload中更改DOM在Chrome中

觀看演示：

<script> 
window.onbeforeunload = function(e){ document.getElementById('a').style.display = "none"; e.returnValue = "adios";} 
</script> 
<div id=a >This text should disappear when the user tries to leave the page</div>

https://jsfiddle.net/qmatic/6sLp7rmq/

我到目前爲止唯一的解決辦法是動畫股利不透明度：0，並在一個setInterval的代碼，不斷重置該動畫。代碼運行時，div總是可見的。 Chrome在顯示警報時會停止所有代碼，因此動畫會最終運行至結束並隱藏div。但這是一個可怕的解決方案 - 我不斷更新DOM來重置動畫。有沒有人有更好的想法？

來源

2016-08-05 Anton

您是否嘗試在**附加事件處理程序之前修改css **，而不是在處理程序中執行此操作？ – Gunnar

我應該什麼時候做？我對試圖離開頁面的用戶做出了反應。我怎麼知道用戶試圖離開頁面之前（例如在地址欄中輸入內容），然後再進行預先禁用之前？ – Anton

的過程由鉻執行似乎是：

1）調用的處理程序，同步等待其返回值

2）如果返回（event.returnValue）合適未定義，則繼續卸載

3）否則會顯示某種模式的彈出窗口，獲取用戶的權限以取消導航。

4）如果導航被取消，留在頁面上，並將刷新週期應用到頁面視圖。

我已經通過調試器的onbeforeunload處理程序加強，當我這樣做，風格改變出現之前的模式對話框，而不是它關閉後，將生效。這似乎表明使用調試器會引入額外的DOM刷新週期，否則在正常運行時不會發生這些週期。我試圖找到一種方法來獲得這些刷新週期之一從處理程序內以編程方式發生，但目前爲止沒有運氣。

在其他瀏覽器中，似乎在上面的步驟1-4之間插入了刷新週期，以提供所需的行爲。

來源

2017-04-05 16:38:45

在模態對話框之前觸發刷新的任何成功？ –

我們決定放棄捕捉onbeforeunload並專門處理它的努力;用戶可以從應用程序會話中斷開任何不會觸發事件的多種方式。我們的團隊以統一的方式處理所有無意的斷開連接，取得了更好的結果。 –

好的，謝謝。我們可能也不會使用onbeforeunload。雖然我們的用例僅僅是爲了顯示用戶的「瀏覽器彈出框後面」的自定義消息，透過透明覆蓋圖可讀取，並隨彈出窗口關閉 - 在Firefox中工作，但在Chrome中無法使用。 –

在beforeunload中更改DOM在Chrome中

回答

相關問題