onbeforeunload 需要帮助或单击浏览器后退按钮答案

【问题标题】：Help required on onbeforeunload or click on browser back buttononbeforeunload 需要帮助或单击浏览器后退按钮
【发布时间】：2010-11-15 12:54:56
【问题描述】：

如果用户单击浏览器的后退按钮，那么我希望出现提示并要求确认。如果用户单击“确定”，那么它应该导航到xx.html。如果用户单击“取消”，则应阻止导航。我该怎么做？

注意：我已经尝试过onbeforeunload 方法，但它适用于所有导航操作。例如，单击页面上的链接也会触发此事件并向用户显示消息。

【问题讨论】：

检查这个网址可能对你有帮助hunlock.com/blogs/Mastering_The_Back_Button_With_Javascript

标签： javascript onbeforeunload

【解决方案1】：

你不能。您可以做的最好的事情是使用onbeforeunload 并在单击普通链接时删除该事件：

<script type="text/javascript">
window.onbeforeunload = function() {return "Are you sure?"}
</script>

<a href="somewhere.html" onclick="window.onbeforeunload = null;">Leave</a>

【讨论】：

注意：如我的回答中所述，您可能还需要处理<form> 提交。
非常感谢。它有助于控制页面中的其他事件。但我无法捕捉用户是否在 onbeforeunload 方法提供的对话框中单击了“确定”。因为如果用户单击确定，那么我需要将用户导航到特定页面。请提供任何代码 sn-p。会有帮助的。
@Bala：这是不可能的。 Web 应用程序的经验法则：如果您认为需要依赖诸如 on(before)unload 之类的事件或尝试控制用户导航到的位置（包括控制后退/前进按钮），那么您的整个概念就被打破了。您的概念需要包含网络（和浏览器）的功能，而不是与之相悖。

【解决方案2】：

无法区分 onbeforeunload 事件中的导航操作。您可以为页面上的所有链接/表单禁用它，方法是删除每个链接的onclick 处理程序中的window.onbeforeunload 处理程序，或删除表单的onsubmit。但是，您仍然无法判断用户是单击了后退、前进、书签等还是在地址栏中输入了新地址。

【讨论】：

【解决方案3】：

首先，您需要捕获“beforeunload”事件（这里之前的答案是这样做的）。

// Display browser warning message when back/forward/reload or hyperlink navigation occurs
$(window).on('beforeunload', function(e) {
  console.log('page navigation captured');
  return 'By leaving this page you will lose the data you have entered here.';
});

更重要的是，您希望允许从某些元素（例如带有“允许导航”类的链接）进行无中断导航。实现的方法是在单击您选择的链接时删除事件处理程序。

// Disable capture for certain elements
$('.allow-navigation').on('click', function(e) {
    $(window).off('beforeunload');
    console.log('page navigation allowed');
});

适用于您的链接类型：

<a href="#" class="allow-navigation">Click me</a>

这样您就可以控制页面导航。浏览器后退/前进/等仍然打开确认框。但是您选择的链接将不会中断。

希望这会有所帮助。

【讨论】：

【解决方案4】：

你可以这样做
$(window).bind("beforeunload", function() {
    return "Are you Sure you want to leave this page?"; // Return whatever message you want
});
如果 xx.html 是他们历史记录中的页面，则不需要添加任何东西都只是返回一条消息，它会自动放置按钮你

编辑：在你认为它没有回答问题之前先看看小提琴问http://jsfiddle.net/Lxq93/

编辑：没有明确的方法仅在背面显示消息据我所知，按钮我也看过并看到了唯一的在后退按钮上拾取的方法是 $(window).bind("beforeunload",function(){return;}) 和 $(window).onbeforeunload = function(){return;} 他们都接了当页面刷新或任何其他导航远离当前页面。这是目前可以提供的最佳答案 2014年

编辑：

以上是所有卸载事件

http://jsfiddle.net/Lhw2x/85/

一直在搞乱它的所有底层对象，直到有人决定让所有主要浏览器为每个卸载事件使用特定名称而不是仅仅作为一个卸载事件，它才能通过 javascript 完成

所以答案是否定的，当他们尝试转到其他页面时，当他们点击确认时，您不能强制导航到特定页面

并且后退按钮没有特定的事件名称，它与卸载事件中的几个不同事件共享其事件，因此您无法通过 javascript 制作后退按钮特定功能

【讨论】：