防止後退按鈕上的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;