javascript - 是否有可能在 beforeunload 彈出窗口中顯示自訂訊息？

當使用 window.onbeforeunload（或 $(window).on("beforeunload")）時，是否可以在該彈出視窗中顯示自訂訊息？

也許有一個在主要瀏覽器上有效的小技巧？

透過查看現有的答案，我覺得過去使用像是 confirm 或 alert 或 event.returnValue 之類的東西是可能的，但現在似乎它們已經不再起作用了。

那麼，如何在 beforeunload 彈出窗口中顯示自訂訊息？這是否還可能做到？

答案＃1

tl;dr - 你在大多數現代瀏覽器中已無法再設置自訂訊息

快速說明（因為這是一個舊答案）——現在所有主要瀏覽器都不支援在 beforeunload 彈出視窗中顯示自訂訊息。沒有新的方法可以做到這點。如果你仍然需要支援舊瀏覽器——你可以在下面找到相關資訊。

為了在用戶關閉視窗之前設置確認訊息，你可以使用

jQuery

$(window).bind("beforeunload",function(event) {
    return "You have some unsaved changes";
});

Javascript

window.onbeforeunload = function() {
    return "Leaving this page will reset the wizard";
};

重要的是要注意，你不能將 confirm/alert 放在 beforeunload 裡面

再補充幾點說明：

不是所有瀏覽器都支援此功能（更多資訊請參閱 MDN 的瀏覽器相容性部分） 2. 在 Firefox 中，你必須與頁面進行一些實際互動，此訊息才會顯示給使用者。
3. 每個瀏覽器都可以在你的訊息中加入自己的文字。

以下是我能使用的瀏覽器所得到的結果：

Chrome:

Firefox:

Safari:

例如：

只是為了確認——你需要包含 jQuery

有關瀏覽器支援及自訂訊息移除的更多資訊：

Chrome 在版本 51 移除了對自訂訊息的支援
Opera 在版本 38 移除了對自訂訊息的支援
Firefox 在版本 44.0 移除了自訂訊息的支援（仍在尋找此資訊的來源）
Safari 在 9.1 版本中移除了自訂訊息的支援

答案＃2

當使用 window.onbeforeunload（或 $(window).on("beforeonload")）時，是否可以在該彈出視窗中顯示自訂訊息？

不再是了。所有主要的瀏覽器已經開始忽略實際訊息，只顯示它們自己的訊息。

透過查看現有的答案，我覺得過去使用像是 confirm 或 alert 或 event.returnValue 之類的東西是可能的，但現在似乎它們已經不再起作用了。

正確。很久以前，你可以使用 confirm 或 alert，最近你可以從 onbeforeunload 處理函數返回一個字串，該字串將被顯示。現在，該字串的內容會被忽略，它被當作一個標誌來處理。

使用 jQuery 的 on 時，你確實需要在原始事件上使用 returnValue：

$(window).on("beforeunload", function(e) {
    // Your message won't get displayed by modern browsers; the browser's built-in
    // one will be instead. But for older browsers, best to include an actual
    // message instead of just "x" or similar.
    return e.originalEvent.returnValue = "Your message here";
});

或者傳統的方式：

window.onbeforeunload = function() {
    return "Your message here"; // Probably won't be shown, see note above
};

那就是你能做的全部。

答案＃3

截至 2021 年，出於安全原因，在主要瀏覽器（Chrome、Firefox、Safari、Edge、Opera）中，已無法在 beforeunload 彈出窗口中顯示自訂訊息。

這已經不再可能，因為：

Chrome：版本 51
Firefox：版本 44
Safari：版本 9
Edge：這從未有過可能
Opera：版本 38

詳情請參見：

https://www.chromestatus.com/feature/5349061406228480
https://caniuse.com/mdn-api_windoweventhandlers_onbeforeunload_custom_text_support

另一種達到類似結果的替代方法是捕捉與連結相關的點擊事件（這些連結會將你帶離當前頁面）並在那裡要求確認。它可能會被調整以包括表單提交，或者可能通過腳本的重定向（這將需要在觸發重定向的元素中應用特定的類別和資訊）。

這裡是一個可運作的程式碼片段（基於 jQuery），展示了你如何做到這一點：

編輯： 這裡的 SO 代碼片段並不適用於所有瀏覽器，出於安全原因（該片段生成了一個 iframe……並且在某些瀏覽器中會出現「不同來源域的 iframe 中不允許使用 window.confirm」的提示），但代碼確實可行，所以可以試試看！

$('body').on('click', function(e) {
  var target, href;
  //Identifying target object
  target = $(e.target);

  //If the target object is a link or is contained in a link we show the confirmation message
  if (e.target.tagName === 'A' || target.parents('a').length > 0) {
    //Default behavior is prevented (the link doesn't work)
    e.preventDefault();

    if (window.confirm("Are you really really sure you want to continue?")) {

      //Identify link target
      if (e.target.tagName === 'A') {
        href = target.attr('href');
      } else {
        href = target.parents('a').first().attr('href');
      }

      //Redirect
      window.location.href = href;

    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<a href="https://stackoverflow.com">Click me and I'll take you home</a>