如何覆蓋 OnBeforeUnload 對話框並將其替換為我自己的？

Question

我需要在用戶離開頁面之前就未保存的更改發出警告（這是一個很常見的問題）。

window.onbeforeunload = handler

這有效，但它會引發一個默認對話框，其中包含一條包含我自己的文本的煩人的標准消息。 我需要完全替換標准消息，以便我的文本清晰，或者（甚至更好）使用 jQuery 將整個對話框替換為模態對話框。

到目前為止，我失敗了，而且我還沒有找到其他人似乎有答案。 有可能嗎？

Javascript 在我的頁面：

<script type="text/javascript">   
    window.onbeforeunload = closeIt;
</script>

closeIt() function：

function closeIt()
{
  if (changes == "true" || files == "true")
  {
      return "Here you can append a custom message to the default dialog.";
  }
}

使用 jQuery 和 jqModal 我已經嘗試過這種事情（使用自定義確認對話框）：

$(window).beforeunload(function () {
    confirm('new message: ' + this.href + ' !', this.href);
    return false;
});

這也不起作用 - 我似乎無法綁定到beforeunload事件。

Answer 1

您無法修改onbeforeunload的默認對話，因此您最好的選擇可能是使用它。

window.onbeforeunload = function() {
    return 'You have unsaved changes!';
}

這是微軟對此的參考：

當一個字符串分配給 window.event 的 returnValue 屬性時，會出現一個對話框，讓用戶可以選擇留在當前頁面並保留分配給它的字符串。 對話框中出現的默認語句“您確定要離開此頁面嗎？...按確定繼續，或按取消留在當前頁面。”，不能刪除或更改。

問題似乎是：

1. 當onbeforeunload被調用時，它會將處理程序的返回值作為window.event.returnValue 。
2. 然后它將返回值解析為字符串（除非它為空）。
3. 由於false被解析為字符串，因此將觸發對話框，然后傳遞適當的true / false 。

結果是，似乎沒有辦法將false分配給onbeforeunload以防止它出現在默認對話中。

關於 jQuery 的附加說明：

• 在 jQuery 中設置事件可能會有問題，因為這也允許其他onbeforeunload事件發生。 如果你只希望你的卸載事件發生，我會堅持使用普通的 JavaScript。

• jQuery 沒有onbeforeunload的快捷方式，因此您必須使用通用bind語法。

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

編輯 09/04/2018 ：自 chrome-51 起不推薦使用 onbeforeunload 對話框中的自定義消息（參見： 發行說明）

Answer 2

使用jQuery並在 IE8、Chrome 和 Firefox 中測試對我有用的是：

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

如果不需要提示，請不要返回任何內容，因為 IE 和其他瀏覽器行為之間存在差異，這一點很重要。

Answer 3

雖然在某些情況下您無法對框做任何事情，但您可以攔截某人單擊鏈接。 對我來說，這對於大多數場景來說都是值得的，作為后備，我已經離開了卸載事件。

我使用 Boxy 而不是標准的 jQuery Dialog，它可以在這里找到： http : //onehackoranother.com/projects/jquery/boxy/

$(':input').change(function() {
    if(!is_dirty){
        // When the user changes a field on this page, set our is_dirty flag.
        is_dirty = true;
    }
});

$('a').mousedown(function(e) {
    if(is_dirty) {
        // if the user navigates away from this page via an anchor link, 
        //    popup a new boxy confirmation.
        answer = Boxy.confirm("You have made some changes which you might want to save.");
    }
});

window.onbeforeunload = function() {
if((is_dirty)&&(!answer)){
            // call this if the box wasn't shown.
    return 'You have made some changes which you might want to save.';
    }
};

您可以附加到另一個事件，並根據點擊的錨點類型進行更多過濾，但這對我和我想做的事情都有效，並且可以作為其他人使用或改進的示例。 我想我會為那些想要這個解決方案的人分享這個。

我已經刪減了代碼，所以這可能無法正常工作。

Answer 4

1) 使用 onbeforeunload，而不是 onunload。

2) 重要的是避免執行 return 語句。 我的意思並不是要避免從您的處理程序返回。 您可以正常返回，但是您要確保到達函數的末尾並且不執行返回語句。 在這些條件下，不會出現內置標准對話框。

3）你可以，如果你使用onbeforeunload，在你的unbeforeunload處理程序中運行一個ajax調用來整理服務器，但它必須是同步的，你必須在你的onbeforeunload處理程序中等待和處理回復（仍然尊重上述條件（2））。 我這樣做並且效果很好。 如果您執行同步 ajax 調用，則一切都會暫停，直到響應返回。 如果你做一個異步的，認為你不關心來自服務器的回復，頁面卸載繼續並且你的 ajax 調用被這個過程中止 - 如果它正在運行，包括一個遠程腳本。

Answer 5

為了避免垃圾郵件，現在無法在 chrome 中完成此操作，請參閱javascript onbeforeunload 不顯示自定義消息以了解更多詳細信息。

Answer 6

嘗試return; 而不是消息..這對我來說適用於大多數瀏覽器。 （這只會真正阻止對話的禮物）

window.onbeforeunload = function(evt) {            
        //Your Extra Code
        return;
}

Answer 7

Angular 9 方法：

constructor() {
    window.addEventListener('beforeunload', (event: BeforeUnloadEvent) => {
     if (this.generatedBarcodeIndex) {
      event.preventDefault(); // for Firefox
      event.returnValue = ''; // for Chrome
      return '';
     }
     return false;
    });
   }

瀏覽器支持和刪除自定義消息：

• Chrome 在 51 分鍾內取消了對自定義消息的支持
• Opera 在 38 分鍾內刪除了對自定義消息的支持
• Firefox 在 ver 44.0 min 中刪除了對自定義消息的支持
• Safari 在版本 9.1 中移除了對自定義消息的支持

Answer 8

我遇到了同樣的問題，我可以用我的消息獲得自己的對話框，但我面臨的問題是：1）它在所有導航上都給出了消息，我只需要點擊即可。 2) 使用我自己的確認消息，如果用戶選擇取消，它仍會顯示瀏覽器的默認對話框。

以下是我找到的解決方案代碼，我寫在我的母版頁上。

function closeMe(evt) {
    if (typeof evt == 'undefined') {
        evt = window.event; }
    if (evt && evt.clientX >= (window.event.screenX - 150) &&
        evt.clientY >= -150 && evt.clientY <= 0) {
        return "Do you want to log out of your current session?";
    }
}
window.onbeforeunload = closeMe;

Answer 9

您可以檢測用戶按下了哪個按鈕（確定或取消），因為只有在用戶選擇離開頁面時才會調用 onunload 函數。 盡管在此功能中可能性是有限的，因為 DOM 正在折疊。 您可以運行 javascript，但 ajax POST 不執行任何操作，因此您不能使用此方法進行自動注銷。 但是有一個解決方案。 window.open('logout.php') 在 onunload 函數中執行，因此用戶將注銷並打開一個新窗口。

function onunload = (){
    window.open('logout.php');
}

當用戶離開頁面或關閉活動窗口並且用戶通過“logout.php”注銷時調用此代碼。 注銷php時新窗口立即關閉，代碼如下：

window.close();

Answer 10

如何使用“綁定”命令“一”的專用版本。 事件處理程序第一次執行后，它會作為事件處理程序自動刪除。

$(window).one("beforeunload", BeforeUnload);

Answer 11

 <script type="text/javascript">
        window.onbeforeunload = function(evt) {
            var message = 'Are you sure you want to leave?';
            if (typeof evt == 'undefined') {
                evt = window.event;
            }       
            if (evt) {
                evt.returnValue = message;
            }
            return message;
        } 
    </script>

從http://www.codeprojectdownload.com參考

Answer 12

嘗試這個

$(window).bind('beforeunload', function (event) {
            setTimeout(function () {
                var retVal = confirm("Do you want to continue ?");
                if (retVal == true) {
                    alert("User wants to continue!");
                    return true;
                }
                else {
                    window.stop();
                    return false;
                }
            });
            return;
        });