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

Question

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

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

Answer 1

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

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

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

Answer 2

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

Answer 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.';
});

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

// 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>

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

希望这有帮助。

Answer 4

你可以做到

$(window).bind("卸载前", function() {
    return "您确定要离开此页面吗？"; // 返回你想要的任何消息
}); 

如果 xx.html 是其历史记录中的页面，则无需添加
任何东西只要返回一条消息，它就会自动放置按钮
你

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

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

编辑：

以上是所有卸载事件

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

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

所以答案是否定的，你不能强制当他们尝试转到其他页面时，在确认上单击“确定”时导航到特定页面

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