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