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

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

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; } }); } }); jQuery（函数（$）{ /*全局卸载通知*/ 警告=正确； 如果（警告）{ $（窗口）.bind（“卸载”，函数（）{ if（确认（“您想离开此页”）==true）{ //他们按OK 警报（“正常”）； }否则{ //他们按取消 警报（“取消”）； 返回false； } }); } }); 我目前正在一个电子商务网站上工作，显示您未来订单的页面能够使用+/-按钮更改订单数量。以这种方式更改数量实际上并不会更改订单本身，他们必须按确认，从而提交一个积极的操作来更改订单

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

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

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

---

有什么想法吗？

您想使用onbeforeunload事件。

尝试使用

e.preventDefault（）

而不是返回false。”e'将是卸载回调的第一个参数。

onbeforeunload

是您想要的参数；函数“应该为事件对象的returnValue属性指定一个字符串值，并返回相同的字符串”。查看和的文档以了解详细信息

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

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不支持此代码根据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;
});

正如在注释中所说，jQuery中的任何内容都不会绑定到

beforeunload

事件

---

@卡里姆79：没有。jQuery中没有任何东西绑定到beforeunload函数；“unload”绑定到“unload”事件。如果您不相信我，请搜索来源；-）-尼克菲茨

因此，必须使用纯Javascript在卸载之前将函数绑定到

事件


var警告=true；
$（“表格”）。提交（函数（）{
警告=错误；
});
$（'#退出'）。单击（函数（）{
window.location.replace（'https://stacksnippets.net/js')
});
window.onbeforeunload=函数（）{
如果（警告）{
返回true；
}
}

@scunliffe-在jQuery中，“unload”的意思是“onbeforeunload”，这就是她正在做的事情。@karim79：不，不是。jQuery中没有任何东西绑定到beforeunload函数；“unload”绑定到“unload”事件。如果您不相信我，请搜索来源；-）@MathieuK-我投了赞成票，因为我认为你是对的，但你可能应该1）加入一个例子，或者2）在其他人出现之前修改问题中的代码以纳入你的建议；）preventDefault不会对卸载事件产生任何影响-脚本不可能取消卸载，因为这将允许恶意站点劫持浏览器窗口。preventDefault未在卸载事件上实现Chrome不支持吗？我很确定，当我在编辑器中输入一些东西（我在Linux上使用Chrome 4.0.206.0）时，它会向我显示这样一个对话框。你需要一个多行字符串。为什么要向下投票？我回答并补充了这个话题。警告变量用于说明概念证明。将其关闭或移除。我相信大多数用户不会从这个网站上一字不差地复制代码并按原样使用它。我猜是因为您设置了警告变量，然后在提交函数中没有使用它，例如，只需使用
warning=false
而不是
window.onbeforeunload=null
在发生提交操作时，不需要发出警告…仅当用户试图在未提交的情况下离开页面时才需要发出警告。应该注意的是，如果使用jQuery绑定事件，则应绑定到
beforeunload
（关闭字符串的
部分）这在现代浏览器上不再起作用。您不能在显示框中放置任何自定义消息。（显然是出于安全原因）相关：
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?";
}