有時候,由于業務需求,需要監聽用戶的后退行為,比如禁止用戶后退,比如想在用戶后退是給鏈接加上參數,這該怎么辦呢?window對象的popstate事件就派上用場了

每當處于激活狀態的歷史記錄條目發生變化時,popstate事件就會在對應window對象上觸發. 如果當前處于激活狀態的歷史記錄條目是由history.pushState()方法創建,或者由history.replaceState()方法修改過的, 則popstate事件對象的state屬性包含了這個歷史記錄條目的state對象的一個拷貝.

但是,調用history.pushState()或者history.replaceState()不會觸發popstate事件.?popstate事件只會在瀏覽器某些行為下觸發, 比如點擊后退、前進按鈕(或者在JavaScript中調用history.back()、history.forward()、history.go()方法).

要觸發popstate事件,需要兩步

1.添加并激活一個歷史記錄條目(history.pushState)

2.改變歷史記錄條目(用戶行為,比如后退,前進)

以下是一個場景,當用戶觸發popstate事件時,檢測上一個頁面的url,如果是指定url,則加上指定的查詢字符串參數,便于后臺知道訪問url源自用戶的"后退"等動作,而不是直接輸入網址

//添加并激活一個歷史條目

function pushHistory() {

var state = {

};

window.history.pushState(state, "");

}

var url=document.referrer.replace('http://'+window.location.host,'');//上一頁的url

if(url.indexOf('/mobile/index/index')>-1){//如果上一頁url是指定url

var newIndex //用戶觸發popstate時間后,將要跳轉的url

if(url.indexOf('?')>0){//已經攜帶了查詢字符串,則追加字符串

newIndex=document.referrer+'&popstate=1'

}else{//沒有,則加上字符串參數

newIndex=document.referrer+'?popstate=1'

}

pushHistory();//添加并激活一個歷史條目

//當觸發popstate事件時,執行的邏輯

window.addEventListener("popstate", function(e) {

window.location.href=newIndex;//根據自己的需求實現自己的功能,我這里是跳轉,也可以變成刷新,或者什么都不做,如果是什么都不做,需要再次添加并激活一個歷史記錄條目

}, false);

Tips:

1.后退/前進時,通常情況下,瀏覽器會重新渲染頁面,但并沒有對當前頁面重新發起請求,而且控件的值不會變.

2.微信瀏覽器(真機)的行為有些不一樣,當后退時,如果后退后的一頁有popstate事件,則會立即觸發,這不是我們想要的.因此需要做一個小的改動

var canPopstate=false //1秒內不運行執行popstate里的邏輯

setTimeout(function () {//1秒后才真正執行popstate觸發后的邏輯

canPopstate=true

},5000)

window.addEventListener("popstate", function(e) {

if(canPopstate){//可以執行了

//業務邏輯

window.location.href='/'

}else{//如果還沒到1秒用戶點擊了后退,則繼續添加歷史記錄

history.pushState({},'','aa=bb')

}

}, false);

history.pushState({},'','acc=ddd')

以上代碼可以防止微信瀏覽器內點擊后退時立即執行popstate里的邏輯

3.無論當前頁面增加了幾個歷史,一旦請求其他頁面,則后退只保留最新的歷史.

總結

以上是生活随笔為你收集整理的popstate_HTML onpopstate 属性 - Break易站的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。