如何防止意外導航離開未儲存變更的頁面？

如何顯示「您確定要離開此頁面嗎？」提交更改後

在現代Web 環境中，顯示自訂導航提示被認為是安全性問題，瀏覽器不再支援此功能。相反，瀏覽器將僅顯示通用訊息。若要啟用或停用導覽提示，只需使用以下程式碼：

// Enable navigation prompt
window.onbeforeunload = function() {
    return true;
};

// Remove navigation prompt
window.onbeforeunload = null;

舊版瀏覽器支援（已棄用）

為了與舊版瀏覽器相容，例如如IE6-8和Firefox 1-3.5，可以使用以下程式碼顯示自訂導航提示：

var confirmOnPageExit = function (e) {
    // Define the message to be displayed
    var message = 'Confirm your navigation away from the page';

    // Handle compatibility with older browsers
    if (e) {
        e.returnValue = message;
    }

    // Return the message
    return message;
};

// Enable the navigation prompt
window.onbeforeunload = confirmOnPageExit;

// Disable the navigation prompt
window.onbeforeunload = null;

要在使用jQuery 等驗證框架時檢查更改的值，您可以使用類似以下的程式碼：

$('input').change(function() {
    // Check if the input value is not empty
    if( $(this).val() != "" ) {
        // Enable the navigation prompt
        window.onbeforeunload = confirmOnPageExit;
    }
});

以上是如何防止意外導航離開未儲存變更的頁面？的詳細內容。更多資訊請關注PHP中文網其他相關文章！