jQuery beforeunload自定義彈出窗口，用於離開頁面

Question

嗨，我想自定義彈出窗口，是否有任何簡單的方法可以做到這一點？

我使用的是簡單的jQuery

$(document).ready(function() {
    var myPopUp = $('#pop-up').css('display', 'block');
    $(window).bind('beforeunload', function(){
      return 'load my pop up here instead of the default browser message';
    });
});

我彈出的html是默認隱藏的

<div id="pop-up">
  <h2>Are you sure wanna leave</h2>
  <a href="#">Leave</a>
  <a href="#" class="close">Stay</a>
</div>

謝謝

Answer 1

簡答： 你做不到 。

更長的答案：出於相當明顯的“安全”原因，當用戶試圖離開頁面/關閉標簽或以任何其他方式離開網站時，您可以做的事情非常有限。

原因是瀏覽器希望絕對確保您無法阻止用戶關閉他/她想要關閉的選項卡或窗口 。

因此onbeforeunload javascript事件 - 以及擴展的beforeunload jQuery事件 - 在他們能做的事情上非常有限。 他們絕對不能做的事情之一是阻止頁面關閉 - 除了使用瀏覽器（通常）允許的一種非常標准化且相當無聊的方法。

有些瀏覽器允許您指定消息，而其他瀏覽器（包括firefox）甚至不允許您更改消息（因為您可能會通過詢問“我可以采用您未出生的兒子嗎？”來欺騙用戶。）... AFAIK大多數瀏覽器允許除了無法更改的標准消息之外 ，還要指定您選擇的字符串。 有些瀏覽器（沒有主要的桌面瀏覽器）甚至完全沒有這個事件。

你想要實現的目的基本上是強迫用戶留在你的頁面上，然后顯示一個漂亮的彈出窗口，要求他們確認......雖然這在很多情況下肯定會改善用戶體驗，但你不要我必須非常難以想象，如果不允許用戶離開它會如何被濫用。

想想破壞后退按鈕的網站是多么煩人，然后想象他們甚至可以刪除你關閉標簽的能力！

我偶然發現了這個相當有趣的論壇問題來自一個用戶，他花了很多時間試圖阻止甚至可以添加什么小麻煩 - 一個簡短的摘錄：

我不喜歡onunload和onbeforeunload。 我不認為他們應該在我的firefox安裝上被解雇。 我認為這些事件沒有任何有用的應用，甚至沒有“你有未得救的工作！”的好處。 彈出窗口。 當我告訴我的網絡瀏覽器關閉網頁時，我不希望網頁阻止（或延遲）瀏覽器關閉它 - 完全沒有。

只是添加一些有點官方信息：

mozilla.org： WindowEventHandlers.onbeforeunload ：

自2011年5月25日起，HTML5規范聲明在此事件期間可能會忽略對window.alert（），window.confirm（）和window.prompt（）方法的調用。 有關更多詳細信息，請參閱HTML5規范。

Answer 2

這個問題已經被問和幾個計算器的帖子回答諸如這樣一個

如果您還可以詳細說明離開“頁面”的情況，您可能會得到更好和正確的答案。 如果您想警告用戶應該保存，然后檢查鏈接的頂部帖子。 如果您只是想在離開頁面前發出警告，請嘗試用戶Hunter離開的答案：

<script type='text/javascript'>
function goodbye(e) {
    if(!e) e = window.event;
    //e.cancelBubble is supported by IE - this will kill the bubbling process.
    e.cancelBubble = true;
    e.returnValue = 'You sure you want to leave?'; //This is displayed on the dialog

    //e.stopPropagation works in Firefox.
    if (e.stopPropagation) {
        e.stopPropagation();
        e.preventDefault();
    }
}
window.onbeforeunload=goodbye; 

</script>

Answer 3

https://developer.mozilla.org/en-US/docs/Web/API/WindowEventHandlers/onbeforeunload#Browser_compatibility

它不可能有自定義彈出窗口查看指定的鏈接