如何檢測history.pushState和history.replaceState的使用時間？

當歷史狀態被修改時，是否有一些事件可以訂閱？怎麼樣？如何檢測history.pushState和history.replaceState的使用時間？

2011-02-26 BrunoLM

的onpopstate事件應該被解僱了當歷史的變化，你可以給它綁定在你的代碼是這樣的：

window.onpopstate = function (event) { 
    // do stuff here 
}

此事件可能也被解僱在頁面加載時，就可以判斷該事件是否通過檢查對國有資產的事件對象發射從頁面加載，或通過使用pushState的/ replaceState，這將是不確定的，如果事件是由頁面加載

window.onpopstate = function (event) { 
    if (event.state) { 
    // history changed because of pushState/replaceState 
    } else { 
    // history changed because of a page load 
    } 
}

有造成目前尚無onpushstate事件不幸，爲了解決這個問題，你需要包裝pushState和replaceState方法都可以實現您自己的onpushstate事件。

我有一個庫，使pushState工作更容易一些，它可能是值得檢查出Davis.js，它提供了一個簡單的API與基於pushState的路由工作。

來源

2011-02-27 17:35:47

似乎event.state可能仍然在頁面加載（Chrome）上設置。 – GolezTrol 2011-07-20 15:29:56

Mozilla/Firefox在頁面加載時不發出onpopstate事件，但Safari/Chrome做 – tom 2012-07-23 23:25:12

在我的情況下，這個事件發生在ajax調用成功之後。可能由於這個原因，我無法第一次檢測到事件。如果我點擊後退/前進按鈕，那麼它的效果很好，但我不希望我的用戶點擊這些歷史按鈕。 – 2016-08-06 17:55:59

我用這個也被通知當pushState和replaceState被稱爲的：

// Add this: 
var _wr = function(type) { 
    var orig = history[type]; 
    return function() { 
     var rv = orig.apply(this, arguments); 
     var e = new Event(type); 
     e.arguments = arguments; 
     window.dispatchEvent(e); 
     return rv; 
    }; 
}; 
history.pushState = _wr('pushState'), history.replaceState = _wr('replaceState'); 

// Use it like this: 
window.addEventListener('replaceState', function(e) { 
    console.warn('THEY DID IT AGAIN!'); 
});

它通常是矯枉過正，但。它可能不適用於所有瀏覽器。（我只關心我的瀏覽器版本。）

注意：它也不適用於Google Chrome擴展程序內容腳本，因爲它不允許更改網站的JS環境。你可以通過在代碼中插入一個<script>來解決這個問題，但這更加矯枉過正。

來源

2014-09-04 19:52:01 Rudie

如何檢測history.pushState和history.replaceState的使用時間？

回答

相關問題