使用 onhashchange 或 jquery 控制后退按钮答案

【问题标题】：Controlling the Back button using onhashchange or jquery使用 onhashchange 或 jquery 控制后退按钮
【发布时间】：2012-02-08 21:10:47
【问题描述】：

我需要一些关于如何使用后退按钮进行基本控制的指导。

基本上，我需要警告用户通过单击后退按钮，当在我的 checkout.asp 页面上时，他们将丢失已经存在的项目。我需要指示他们改用导航按钮。

我环顾四周，看到提到 onhashchange 事件，但我无法让它发挥作用。

我也试过 Ben Alman 的插件：

<script type="text/javascript" src="jquery/js/jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="jquery/js/jquery-ui-1.8.16.custom.min.js"></script>
<script type="text/javascript" src="jquery/js/jquery.ba-hashchange.js"></script>

<script language="JavaScript" type="text/JavaScript">
$(function(){
    // Bind the event.
    $(window).hashchange( function(){
    // Alerts every time the hash changes!
    alert( location.hash );
    })
    // Trigger the event (useful on page load).
    $(window).hashchange();
});
</script>

这只会在进入页面时触发警报（没有来自 location.hash 的值），但我只是想在用户离开时警告用户。如果他们选择留下，让他们按取消键，让他们留在同一页面上。

任何帮助表示赞赏。

【问题讨论】：

标签： javascript jquery hashchange jquery-bbq

【解决方案1】：

用途：

window.onbeforeunload = function() {
   return confirm("you have unsaved data. ok to exit?")
})

【讨论】：

Diodeus 谢谢。我已经尝试过了，但它再次只在进入页面时发出警报，而不是在离开时发出警报。只是为了确定-我已将您的代码附在 $(function(){..code..}) 中，我认为这是正确的。此外，即使用户也按下了其中一个导航按钮，这不会触发吗？
二重奏。效果很好。但是，即使用户使用“正确的”导航按钮，它仍然给我留下了标记的问题。你知道我怎样才能只捕获后退按钮吗？

【解决方案2】：

为了只在使用后退按钮时显示警告，我们必须在点击有效来源时消除警告消息。

var showWarning = true;

window.onbeforeunload = function() {
  if (showWarning) {
    return confirm("you have unsaved data. ok to exit?");
  }
}

function clearWarning() {
  showWarning = false;
}

现在只需确保在单击允许的按钮时调用 clearWarning() 函数。像这样的东西应该可以工作：

referenceToElement.addEventListener('onClick', clearWarning(), false);

我没有对此进行测试，但我想你需要这样的东西。

【讨论】：