body 標簽中的 onbeforeunload 和 beforeunload 有什么區別？

Question

有什么區別

<body onbeforeunload="return myFunction()">

和

$(window).on('beforeunload', function () {
    myFunction();
});

Answer 1

onbeforeunload事件在文檔即將被卸載時發生。

此事件允許您在確認對話框中顯示一條消息，以通知用戶他/她是要留下還是離開以下代碼片段中顯示的當前頁面。

確認框中顯示的默認消息，在不同的瀏覽器中是不同的。 但是，標准消息類似於“您確定要離開此頁面嗎？”。 此消息無法刪除。

 <!DOCTYPE html> <html> <body onbeforeunload="return myFunction()"> <p>Reload this page, or click on the link below to invoke the onbeforeunload event.</p> <a href="https://stackoverflow.com/">Click here to go to stackoverflow.com</a> <script> function myFunction() { return "Write something clever here..."; } </script> </body> </html>

beforeunload事件在窗口、文檔及其資源即將卸載時觸發。 文檔仍然可見，此時事件仍然可以取消。

 window.addEventListener('beforeunload', (event) => {
  // Cancel the event as stated by the standard.
  event.preventDefault();
  // Chrome requires returnValue to be set.
  event.returnValue = '';
});

Answer 2

函數綁定到事件的時間可能會有所不同，具體取決於您的 jQuery 代碼所在的位置。 如果它在 HEAD 部分內聯，那么 jQuery 代碼將更早運行，並更快地綁定事件，否則在幾乎所有情況下，body 屬性都會更早地將函數綁定到事件。

您的代碼可能無法在現代瀏覽器中運行。 這個鈎子主要由信譽較差的惡意網站使用，這些網站想要阻止用戶離開他們的頁面並誘騙他們購買東西。 Adblockers 通常會阻止 body 標簽中的鈎子完全觸發。

您過去可以從函數返回一個字符串來自定義消息，但現在在大多數瀏覽器中已禁用。 您所能做的就是確認用戶想要離開該頁面。 為了將來打樣，我會將以下代碼放在我的 head 部分：

<script>
window.addEventListener(function(event) {
   event.preventDefault();
   // ... stuff ...
   return 'reason';
})
</script>

事件盡管使用此事件有合法的、非粗略的理由，但除非絕對必要，否則我會避免它。 無法保證事件會觸發，並且在您的初始化代碼有機會運行之前，用戶有可能單擊確認按鈕（或具有始終確認的設置/擴展名）。

body 標簽中的 onbeforeunload 和 beforeunload 有什么區別？

問題描述

2 個解決方案

解決方案1
0 2020-09-04 08:02:49

解決方案2
0 2020-09-04 08:03:50

body 標簽中的 onbeforeunload 和 beforeunload 有什么區別？

問題描述

2 個解決方案

解決方案1 0 2020-09-04 08:02:49

解決方案2 0 2020-09-04 08:03:50

解決方案1
0 2020-09-04 08:02:49

解決方案2
0 2020-09-04 08:03:50