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

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

但是,調用history.pushState()或者history.replaceState()

要觸發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);
            

監控瀏覽器的前進後退---window.onpopstate事件