禁止瀏覽器後退

禁止瀏覽器後退

需求爲用戶在當前頁面不能夠返回上一頁面，怎麼實現功能呢？利用history api pushState 與 popstate事件。

popstate

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

pushState

能夠添加歷史記錄，能夠理解爲，頁面的url發生變化，可是頁面沒有刷新。

 /** * state 爲一個對象，在用戶導航到新的狀態出觸發popstate事件，做爲事件的state屬性 * title 標題 * url 新的頁面url 能夠爲絕對路徑也能夠爲相對路徑 */ window.history.pushState(state, title, url); /** * state 爲一個對象，在用戶導航到新的狀態出觸發popstate事件，做爲事件的state屬性 * title 標題 * url 新的頁面url 能夠爲絕對路徑也能夠爲相對路徑 */ window.history.pushState(state, title, url);

如何實現

 let time = 0; // 添加歷史記錄 window.onload(() => { window.history.pushState(null, null, `?times=${time}`); }); window.addEventListener('popstate', () => { time += 1; window.history.pushState(null, null, `?times=${time}`); });let time = 0; // 添加歷史記錄 window.onload(() => { window.history.pushState(null, null, `?times=${time}`); }); window.addEventListener('popstate', () => { time += 1; window.history.pushState(null, null, `?times=${time}`); });