使用onhashchange或jquery控制Back按钮

时间:2012-02-08 21:10:47

标签: javascript jquery hashchange jquery-bbq

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

基本上,我需要警告用户,通过单击后退按钮,当我在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的值),但我只是想警告用户是否要离开。如果他们选择留下,那么让他们按取消将他们留在同一页面上。

任何帮助表示感谢。

2 个答案:

答案 0 :(得分:0)

使用:

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

答案 1 :(得分:0)

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

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);

我没有对此进行过测试,但我认为这样的事情就是你所需要的。