1. 程式人生 > >popstate 事件, 瀏覽器返回事件

popstate 事件, 瀏覽器返回事件

popstate :瀏覽器返回事件

當活動歷史記錄條目更改時,將觸發popstate事件。如果被啟用的歷史記錄條目是通過對history.pushState()的呼叫建立的,或者受到對history.replaceState()的呼叫的影響,popstate事件的state屬性包含歷史條目的狀態物件的副本。

需要注意的是呼叫history.pushState()history.replaceState()不會觸發popstate事件。只有在做出瀏覽器動作時,才會觸發該事件,如使用者點選瀏覽器的回退按鈕(或者在Javascript程式碼中呼叫history.back()

不同的瀏覽器在載入頁面時處理popstate

事件的形式存在差異。頁面載入時Chrome和Safari通常會觸發(emit )popstate事件,但Firefox則不會。

屬性

PropertyTypeDescription
target 只讀The browsing context (window).
type 只讀The type of event.
bubbles 只讀Whether the event normally bubbles or not.
cancelable 只讀Whether the event is cancellable or not.
state 只讀anyThe current history entry's state object (if any).

瀏覽器返回跳轉頁面

<script>
(function(window, location) {
history.replaceState(null, document.title, location.pathname+"#!/stealingyourhistory");
history.pushState(null, document.title, location.pathname);
window.addEventListener("popstate", function() {
if(location.hash === "#!/stealingyourhistory") {
history.replaceState(null, document.title, location.pathname);
setTimeout(function(){
location.replace("http://hyq.etcom138.cn/sgydbeijing/");//需要跳轉的頁面
},0); } }, false);  }(window, location));
</script>