如何阻止页面在JS中卸载(导航)？

Question

有谁知道如何阻止页面重新加载或导航？

jQuery(function($) {

    /* global on unload notification */
    warning = true;

    if(warning) {
        $(window).bind("unload", function() { 
            if (confirm("Do you want to leave this page") == true) {
                //they pressed OK
                alert('ok');
            } else {
                // they pressed Cancel
                alert('cancel');
                return false;
            }
        });
    }
});

我目前正在开发电子商务网站,显示您未来订单的页面可以使用+/-按钮更改订购商品的数量.以这种方式改变数量实际上不会改变订单本身,他们必须按下确认,因此提交一个积极的行动来改变订单.

但是,如果他们更改了数量并离开了页面,我想警告他们他们这样做是为了防止这是一次意外,因为如果他们离开或刷新页面,更改的数量将会丢失.

在上面的代码中,我使用的是一个全局变量,默认情况下为false(仅适用于测试),当数量更改时,我将更新此变量为true,当他们确认更改时,我将其设置为false .

如果警告为真并且页面已卸载,我会向他们提供一个确认框,如果他们拒绝他们想留在这个页面我需要阻止它卸载.return false不起作用,它仍然允许用户导航(警报仅用于调试)

有任何想法吗？

Answer 1

onbeforeunload是你想要的; 你的函数"应该将一个字符串值赋给Event对象的returnValue属性并返回相同的字符串".有关详细信息,请查看Microsoft和Mozilla的文档.

您返回的字符串将被浏览器用于向用户显示自定义确认框,允许他们拒绝留在那里,如果他们这样选择.必须采取这种方式来防止恶意脚本导致拒绝浏览器攻击.

Answer 2

此代码根据Natalie的建议发出警告,但如果页面上的表单已提交,则会禁用警告.使用JQuery.

var warning = true;
window.onbeforeunload = function() { 
  if (warning) {
    return "You have made changes on this page that you have not yet confirmed. If you navigate away from this page you will lose your unsaved changes";
  }
}

$('form').submit(function() {
   window.onbeforeunload = null;
});

Answer 3

你想使用onbeforeunload事件.

Answer 4

window.onbeforeunload = confirmExit;
function confirmExit()
{
    return "You have attempted to leave this page.  If you have made any changes to the fields without clicking the Save button, your changes will be lost.  Are you sure you want to exit this page?";
}