如何在JS中停止页面卸载(导航)?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (75)

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

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 。

如果警告是真的,页面被卸载,我给他们一个确认框,如果他们表示不愿意留在这个页面上,我需要阻止它卸载。返回false不起作用,它仍然允许用户离开(警报仅用于调试)

有任何想法吗?

提问于
用户回答回答于

如果页面上的表单已提交,则禁用该警告。使用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;
});
用户回答回答于

onbeforeunload是你想要的; 你的函数“应该为Event对象的returnValue属性赋值一个字符串值并返回相同的字符串”。有关详细信息,请查看MicrosoftMozilla的文档。

您返回的字符串将被浏览器用于向用户显示自定义确认框,从而允许他们拒绝留在那里,如果他们选择的话。必须这样做才能防止恶意脚本导致拒绝浏览器攻击。

扫码关注云+社区

领取腾讯云代金券