資訊專欄INFORMATION COLUMN
摘要：如標題所說，本文提供的方法適用于多頁面網(wǎng)站，如單頁面應用等不適用。利用和控制瀏覽器后退鍵失效，下面說一下如何實現(xiàn)。當你在頁面上寫了瀏覽器會在中添加，同時頁面并不跳轉(zhuǎn)，但你只加了一次，所以只對一次后退事件起作用。
如標題所說，本文提供的方法適用于多頁面網(wǎng)站，如SPA單頁面應用等不適用。
利用window.onpopstate和window.history.pushState 控制瀏覽器后退鍵失效，下面說一下如何實現(xiàn)。
1.在你需要禁止瀏覽器后退鍵的頁面上加上下面的代碼：
當你加上上面的代碼時，你發(fā)現(xiàn)當你點擊一次瀏覽器的后退鍵，頁面并沒有后退，你可能感覺好像是解決問題了，但是當你再次點擊后退鍵時頁面還是返回到上一頁面。
原因是window.history.pushState()方法是向瀏覽器歷史添加了一個狀態(tài)，它有三個參數(shù)分別是，一個狀態(tài)對象（其實就是頁面的參數(shù)），一個標題（現(xiàn)在被忽略了），以及一個可選的URL地址。
當你在頁面上寫了window.history.pushState({},null,location.href);瀏覽器會在history中添加location.href，同時頁面并不跳轉(zhuǎn)，但你只加了一次，所以只對一次后退事件起作用。如何徹底解決這個問題呢？還需要在全局增加onpopstate事件，詳情請看第2步。
2.在全局增加一個onpopstate事件，這里我用的是匿名函數(shù)（當然也可以直接寫）：
;(function(window,undefined){
"use strict"
//判斷當前瀏覽器是否支持history和pushState,據(jù)我測試當前大部分瀏覽器都支持
if(window.history && window.history.pushState)
{
window.onpopstate = function(){
window.history.pushState({},null,"");
//window.history.forward(1); 這句我沒理解什么意思，不加也可以實現(xiàn)，所以注釋掉了
}
}
})(window);
這時你發(fā)現(xiàn)，在你的目標頁面上點擊瀏覽器回退鍵頁面不會跳轉(zhuǎn)了，問題解決。但是上面的代碼是什么意思呢？
window.onpopstate事件會監(jiān)聽瀏覽器的后退、前進按鈕（或者在JavaScript代碼中調(diào)用類似history.back()、history.forward()、history.go()方法），但是調(diào)用像 history.pushState() 或者history.replaceState() 不會觸發(fā)popstate事件。
所以我們在全局中增加popstate監(jiān)聽事件，一但用戶點擊后退按鈕時就會觸發(fā)這個方法，該方法會再次向histroy中添加一個鏈接，防止用戶再一次點擊后退按鈕。
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://www.ezyhdfw.cn/yun/51858.html
摘要：如標題所說，本文提供的方法適用于多頁面網(wǎng)站，如單頁面應用等不適用。利用和控制瀏覽器后退鍵失效，下面說一下如何實現(xiàn)。當你在頁面上寫了瀏覽器會在中添加，同時頁面并不跳轉(zhuǎn)，但你只加了一次，所以只對一次后退事件起作用。 如標題所說，本文提供的方法適用于多頁面網(wǎng)站，如SPA單頁面應用等不適用。 利用window.onpopstate和window.history.pushState 控制瀏覽器后...
摘要：項目上線后，客戶反應當頁面跳轉(zhuǎn)到級或級頁面，點擊瀏覽器后退鍵時，頁面返回上級頁面后提示缺少參數(shù)，頁面的數(shù)據(jù)也是空白的，為了解決這一問題，我的解決方案是禁用瀏覽器后退鍵，下面是解決方法在方法中，用監(jiān)聽地址變化。 該文章適用于angularjs創(chuàng)建的單頁面應用SPA，如vuejs或react.js不在本文討論范圍內(nèi)。 我用angularjs和sb-admin2實現(xiàn)了前端框架，在不考慮瀏覽器...
摘要：項目上線后，客戶反應當頁面跳轉(zhuǎn)到級或級頁面，點擊瀏覽器后退鍵時，頁面返回上級頁面后提示缺少參數(shù)，頁面的數(shù)據(jù)也是空白的，為了解決這一問題，我的解決方案是禁用瀏覽器后退鍵，下面是解決方法在方法中，用監(jiān)聽地址變化。 該文章適用于angularjs創(chuàng)建的單頁面應用SPA，如vuejs或react.js不在本文討論范圍內(nèi)。 我用angularjs和sb-admin2實現(xiàn)了前端框架，在不考慮瀏覽器...
閱讀 2588·2023-04-26 00:46
閱讀 696·2023-04-25 21:36
閱讀 815·2021-11-24 10:19
閱讀 2441·2021-11-23 09:51
閱讀 1128·2021-10-21 09:39
閱讀 935·2021-09-22 10:02
閱讀 1776·2021-09-03 10:29
閱讀 2874·2019-08-30 15:53
