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

有谁知道如何阻止页面重新加载或导航？如何在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; 
      } 
     }); 
    } 
});

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

但是，如果他们更改了数量并导航离开页面，我想警告他们他们这样做是为了防止发生意外，因为如果他们导航或刷新页面，更改的数量将会丢失。

在上面的代码中，我使用了一个默认为false的全局变量（它只对测试有效），当数量发生变化时，我会将这个变量更新为true，当他们确认这些变化时，我会将其设置为false。

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

任何想法？

来源

2009-08-19 Natalie Downe

相关：http://stackoverflow.com/q/821011/435605 – 2016-02-09 06:17:07

你想使用onbeforeunload事件。

来源

2009-08-19 11:54:29 scunliffe

@scunliffe - jQuery的 '卸载' 是指 'onbeforeunload'，这是她在做什么。 – karim79 2009-08-19 12:03:22

+17

@ karim79：不，它不。 jQuery中没有任何绑定到beforeunload函数的东西; “卸载”绑定到“卸载”事件。搜索源如果你不相信我;-) – NickFitz 2009-08-19 12:24:34

-5

尝试使用e.preventDefault()而不是返回false。 'e'将是您的卸载回调的第一个参数。

来源

2009-08-19 11:55:28 NSSec

@MathieuK - 我投票了，因为我认为你是对的，但你应该或者1）放入一个例子或2）修改问题中的代码合并你的建议在别人出现之前就这么做了） – karim79 2009-08-19 12:05:34

+14

preventDefault对卸载事件不会有任何影响 - 脚本不可能取消卸载，因为这样会允许恶意站点劫持浏览器窗口。 – NickFitz 2009-08-19 12:49:11

preventdefault未在卸载事件中实现 – 2014-04-09 11:26:05

onbeforeunload是你想要的;您的函数“应该为Event对象的returnValue属性分配一个字符串值，并返回相同的字符串”“。有关详细信息，请参阅Microsoft和Mozilla的文档。

您返回的字符串将被浏览器用来显示用户自定义确认框，允许他们拒绝留在那里，如果他们选择。必须这样做才能防止恶意脚本导致拒绝浏览器攻击。在Chrome，Safari和Opera支持

来源

2009-08-19 12:28:53 NickFitz

需要注意的是，如果您使用jQuery绑定事件，则应该绑定到'beforeunload'（不要在字符串的on部分） – jgillman 2012-09-13 22:11:52

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 loose your unsaved changes'; 
    } 
}

心不是

来源

2009-09-09 12:19:42

不支持铬？我非常确定，当我在编辑器中输入内容时（我在Linux上使用Chrome 4.0.206.0），我会向我展示这样一个对话框。 – 2009-09-09 12:22:58

此代码警告按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; 
});

来源

2010-10-14 00:04:18 crafter

完全错过了警告变量的要点。 – meandmycode 2011-03-25 16:18:41

为什么downvote？我回答并添加了该主题。警告变量是为了说明概念证明。将其关闭或删除。我相信大多数用户不会逐字从本网站复制代码并按原样使用它。 – crafter 2011-03-27 15:34:51

我猜downvote是因为你设置了警告变量，然后不要在你的提交函数中使用它，只需使用'warning = false'而不是'window.onbeforeunload = null' – 2012-03-28 17:29:49

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?"; 
}

来源

2014-10-07 06:35:33

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

回答

相关问题