防止后退按钮上的hashchange

Question

我有一个使用骨干哈希路由的应用程序。当页面重新加载时，我使用onbeforeunload事件告诉用户存在未保存的更改并阻止页面加载。这不适用于散列更改;所以如果用户按回来，对话框不会告诉他们有待更改，只是返回。

有无论如何检测哈希变化，并防止它发生？像onbeforehashchange

Answer 1

不，你可以检测hashchange，因为它发生在下面的东西，但你不能真正发现它之前它发生。如果在更改之前需要散列，则可以将其存储在某处。

var myHash = document.location.hash; 

$(document).on('hashchange', function() { 
    if (myHash != document.location.hash) { 
     //do something 
    } 
}); 

你真的无法检测后退按钮或者，如果它一点儿也不触发重载，onbeforeunload不会工作。

如果此功能是必不可少的，您应该考虑尝试haschange plugin或history plugin，因为其中之一会使这更容易，并让您控制浏览器历史记录和来回。

Answer 2

我最终在我的路由器中创建了一个函数。这是在每个路由之前运行，并建立一个jQuery UI对话框，并等待回复来运行路线。这是相当混乱的代码我剥离了特定于应用程序的东西。

close: function(callback) { 
    var hash = window.location.hash; 

    if (this.afterHash && this.afterHash == hash) { 
     this.dialog.dialog("close"); 
     return; 
    } 

    callback = callback || function() {}; 
    if (window.onbeforeunload) { 
     var text = window.onbeforeunload(); 
     if (text) { 
      if (!this.dialog) { 
       var t = this; 
       this.afterHash = this.previous; 
       this.dialog = $("<div><p>" + text + "</p><p>Are you sure you want to close the dialog?</p></div>").dialog({ 
        modal: true, 
        width: 420, 
        title: "Confirm Navigation", 
        close: function() { 
         t.dialog.dialog("destroy"); 
         if (t.afterHash) { 
          t.navigate(t.afterHash, { 
           trigger: false 
          }); 
          t.afterHash = null; 
         } 
         t.dialog = null; 
        }, 
        buttons: { 
         'Leave this Page': function() { 
          t.afterHash = null; 
          t.dialog.dialog("close"); 

          closeViewer(); 
          callback.apply(t); 
         }, 
         'Stay on this Page': function() { 
          t.dialog.dialog("close"); 
         } 
        } 
       }); 
      } 
      return; 
     } 
    } 
    this.previous = window.location.hash; 
    callback.apply(this); 
},​ 

在初始化必须添加this.previous = window.location.hash;