如何覆蓋OnBeforeUnload對話框並將其替換爲本身的對話框？

我須要在用戶離開頁面以前警告用戶有關未保存的更改（這是一個很是常見的問題）。

window.onbeforeunload=handler

這能夠工做，可是會引起一個默認對話框，其中包含包裝我本身的文本的刺激性標準消息。 我須要徹底替換標準消息，以使文本清晰，或者（甚至更好）使用jQuery將整個對話框替換爲模式對話框。

到目前爲止，我失敗了，可是我尚未找到彷佛有答案的其餘人。 可能嗎？

我頁面中的Javascript：

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

closeIt（）函數：

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事件。

---

#1樓

儘管在某些狀況下您沒法對此框作任何事情，可是您能夠攔截某人單擊連接。 對於我來講，這在大多數狀況下都是值得的，做爲後備，我已經離開了卸載事件。

我使用Boxy而不是標準的jQuery對話框，可在此處使用： 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.';
    }
};

您能夠附加到另外一個事件，並根據單擊的錨類型進行更多過濾，但這對我和我想作的事情都有效，並做爲其餘人使用或改進的示例。 我想與那些想要此解決方案的人分享一下。

我已經剪掉了代碼，因此這可能沒法正常工做。

---

#2樓

1）使用onbeforeunload，而不是onunload。

2）重要的是要避免執行return語句。 我並非說要避免從處理程序中返回。 您能夠返回正確的全部結果，可是能夠經過確保到達函數的末尾而且不執行return語句來作到這一點。 在這些狀況下，不會發生內置的標準對話框。

3）若是使用onbeforeunload，能夠在unbeforeunload處理程序中運行ajax調用以整理服務器，可是它必須是同步的，而且您必須等待並在onbeforeunload處理程序中處理答覆（仍然要尊重條件（2））。 我這樣作，而且效果很好。 若是您執行同步ajax調用，則全部內容都會保留，直到響應返回爲止。 若是您執行異步操做，覺得您不在意服務器的答覆，則頁面卸載將繼續，而且此過程將停止ajax調用-若是正在運行，則包括遠程腳本。

---

#3樓

嘗試return; 而不是消息..這對我來講大多數瀏覽器都有效。 （這隻會阻止對話框的出現）

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

---

#4樓

您沒法修改onbeforeunload的默認對話框，所以最好的選擇是使用它。

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

這是 Microsoft對此的參考 ：

將字符串分配給window.event的returnValue屬性時，將出現一個對話框，爲用戶提供保留在當前頁面上並保留分配給它的字符串的選項。 對話框中顯示的默認語句「您肯定要離開此頁面嗎？...按OK繼續，或按Cancel保留在當前頁面上。」不能刪除或更改。

問題彷佛是：

1. 調用onbeforeunload ，它將把處理程序的返回值做爲window.event.returnValue 。
2. 而後，它將返回值解析爲字符串（除非它爲null）。
3. 因爲將false解析爲字符串，所以對話框將觸發，而後傳遞適當的true / false 。

結果是，彷佛沒有一種將false分配給onbeforeunload的方法，以防止它與默認對話。

jQuery的其餘說明：

• 在jQuery中設置事件可能會出現問題，由於這也會致使其餘onbeforeunload事件發生。 若是您只但願發生卸載事件，那麼我會堅持使用普通的JavaScript。

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

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

編輯09/04/2018 ：自chrome-51起，onbeforeunload對話框中的自定義消息已棄用（cf： 發行說明 ）

---

#5樓

如何使用「 bind」命令「 one」的專用版本。 一旦事件處理程序第一次執行，它將做爲事件處理程序自動刪除。

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