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事件中的导航操作。您可以为页面上的所有链接/表单禁用它，方法是删除每个链接的window.onbeforeunload处理程序中的onclick处理程序，或onsubmit表单。但是，您仍然无法判断用户是否单击了后退，转发，书签等，或者在地址栏中输入了新地址。

Answer 3

首先，您需要捕获＆＃34; beforeunload＆＃34;事件（之前的答案在这里做了）。

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

更重要的是，您希望允许来自某些元素的不间断导航（例如，带有类＆＃34的链接;允许导航＆＃34;）。实现的方法是在单击所选链接时删除事件处理程序。

// 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("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创建后退按钮特定功能

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

4 个答案: