如何防止意外导航离开未保存更改的页面？-js教程-PHP中文网

如何防止意外导航离开未保存更改的页面？

Susan Sarandon

发布： 2024-12-12 14:20:10

原创

926 人浏览过

How to Prevent Accidental Navigation Away from a Page with Unsaved Changes?

如何显示“您确定要离开此页面吗？”提交更改后

在现代 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中文网其他相关文章！