如何阻止页面在 JS 中卸载（导航）？

IT技术 javascript jquery events
2021-02-02 18:58:40

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

jQuery（函数（$）{

    /* 全局卸载通知 */
    警告 = 真；

    如果（警告）{
        $(window).bind("卸载", function() { 
            if (confirm("你要离开这个页面吗") == true) {
                //他们按OK
                警报（'确定'）；
            } 别的 {
                // 他们按下了取消
                警报（'取消'）；
                返回假；
            }
        });
    }
});

我目前在一个电子商务网站上工作，显示您未来订单的页面可以使用 +/- 按钮更改订购的商品数量。以这种方式更改数量实际上并不会更改订单本身，他们必须按确认并因此采取积极行动来更改订单。

但是，如果他们更改了数量并离开页面，我想警告他们他们正在这样做，以防万一这是意外，因为如果他们离开或刷新页面，更改的数量将丢失。

在上面的代码中，我使用了一个全局变量，默认情况下该变量为 false（仅在测试时为 true），当数量发生变化时，我会将这个变量更新为 true，当他们确认更改时，我会将其设置为 false .

如果警告是真的并且页面被卸载，我会向他们提供一个确认框，如果他们说不，他们想留在这个页面上，我需要阻止它卸载。return false 不起作用，它仍然让用户导航（警报仅用于调试）

有任何想法吗？

6个回答

onbeforeunload是你想要的；您的函数“应该为 Event 对象的 returnValue 属性分配一个字符串值并返回相同的字符串”。查看Microsoft和Mozilla的文档以了解详细信息。

浏览器将使用您返回的字符串向用户显示自定义确认框，允许他们拒绝留在那里，如果他们愿意的话。必须通过这种方式来防止恶意脚本导致拒绝浏览器攻击。

应该注意的是，如果您使用 jQuery 绑定您应该绑定的事件beforeunload（去掉on字符串的一部分）
2021-03-31 18:58:40
这在现代浏览器上不再适用。您不能在显示的框中放置任何自定义消息。（显然是安全原因）
2021-04-12 18:58:40

此代码根据 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;
});
为什么投反对票？我回答并添加到主题中。警告变量用于说明概念证明。将其关闭或将其删除。我相信大多数用户不会从这个站点逐字复制代码并按原样使用它。
2021-03-15 18:58:40
在提交操作的情况下不需要警告......仅当用户尝试离开页面而不提交时。
2021-03-30 18:58:40
我猜测downvote是因为你设置了警告变量然后不在你的提交函数中使用它，例如只是使用warning=false而不是window.onbeforeunload = null
2021-04-09 18:58:40

您想使用onbeforeunload事件。

@karim79：不，不是。jQuery 中没有任何东西绑定到 beforeunload 函数；“卸载”绑定到“卸载”事件。如果您不相信我，请搜索来源;-)
2021-03-27 18:58:40
@scunliffe - 在 jQuery 中，'unload' 的意思是 'onbeforeunload'，这就是她正在做的。
2021-04-08 18:58:40 
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?";
}

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`;
  }
}

chrome、safari 和 opera 不支持

Chrome 不支持？当我在编辑器中输入内容时，我很确定 SO 会向我展示这样一个对话框（我在 Linux 上使用 Chrome 4.0.206.0）
2021-03-14 18:58:40
您需要一个多行字符串。
2021-03-19 18:58:40
其它你可能感兴趣的问题
上一篇如何在 Javascript 中将 DOM 节点列表转换为数组？ 下一篇在 iframe 中调用 javascript 函数