移動瀏覽器后退按鈕事件處理

Question

當我單擊移動瀏覽器的后退按鈕時，它應該說出確認框，例如

“您要離開此頁面嗎”

如果用戶單擊“確定”，則需要觸發某些功能。

一切正常。 但是，當我單擊“取消”時，它不會停留在同一頁面上。 我嘗試了以下代碼。 但是無法成功。

var unloadEvent = function (e) {
    var confirmationMessage = "Are you want to leave this page";
    (e || window.event).returnValue = confirmationMessage; 
    if(confirm(confirmationMessage)) {
      //some JS function
    } else {
       return false;
    }
};
window.addEventListener("beforeunload", unloadEvent);

請幫我解決這個問題。 謝謝

Answer 1

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

window.onbeforeunload = function() {
    //Do some other stuff here..
    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() {} ); 

歐文（Owen）針對以下問題提出了這個答案：重寫onbeforeunload謝謝歐文。