現(xiàn)在IT發(fā)展迅速哑梳，大多數(shù)朋友無論是什么行業(yè)或者崗位都在或多或少的學(xué)習(xí)一些IT方面的知識(shí)发框，而lweb前端又是最受歡迎的一種菇怀。今天小猿圈web前端老師為你分享一下web前端之監(jiān)聽攔截Android返回鍵方法餐胀，感興趣的朋友一起看看吧棚蓄。
瀏覽器窗口有一個(gè)history對(duì)象堕扶，用來保存瀏覽歷史。
如果當(dāng)前窗口先后訪問了三個(gè)網(wǎng)址梭依，那么history對(duì)象就包括三項(xiàng)稍算，history.length屬性等于3。
history對(duì)象提供了一系列方法睛挚，允許在瀏覽歷史之間移動(dòng)：
window.history.back()：移動(dòng)到上一個(gè)訪問頁面邪蛔，等同于瀏覽器的后退鍵。
window.history.forward()：移動(dòng)到下一個(gè)訪問頁面扎狱，等同于瀏覽器的前進(jìn)鍵侧到。
window.history.go(num)：接受一個(gè)整數(shù)作為參數(shù)，移動(dòng)到該整數(shù)指定的頁面淤击，比如go(1)相當(dāng)于forward()匠抗，go(-1)相當(dāng)于back()。
window.history.pushState()：HTML5為history對(duì)象添加了兩個(gè)新方法污抬。
window.history.pushState()和window.history.replaceState()汞贸，用來在瀏覽歷史中添加和修改記錄。
注：1印机、如果移動(dòng)的位置超出了訪問歷史的邊界矢腻，以上三個(gè)方法并不報(bào)錯(cuò)，而是默默的失敗射赛。
2多柑、設(shè)置時(shí)，頁面通常是從瀏覽器緩存之中加載楣责，而不是重新要求服務(wù)器發(fā)送新的網(wǎng)頁竣灌。
重點(diǎn)講解下： window. history.pushState()
window.history.pushState(state, title, utl)，在頁面中創(chuàng)建一個(gè) history 實(shí)體秆麸。直接添加到歷史記錄中初嘹。
其中參數(shù)：
state：一個(gè)與指定網(wǎng)址相關(guān)的狀態(tài)對(duì)象，popstate事件觸發(fā)時(shí)沮趣，該對(duì)象會(huì)傳入回調(diào)函數(shù)屯烦。如果不需要這個(gè)對(duì)象，此處可以填null。
title：新頁面的標(biāo)題驻龟，但是所有瀏覽器目前都忽略這個(gè)值甸箱，因此這里可以填null。
url：新的網(wǎng)址迅脐， 必須與當(dāng)前頁面處在同一個(gè)域 芍殖。瀏覽器的地址欄將顯示這個(gè)網(wǎng)址。
注：pushState方法不會(huì)觸發(fā)頁面刷新谴蔑，只是導(dǎo)致history對(duì)象發(fā)生變化豌骏，地址欄會(huì)有反應(yīng)。
舉例實(shí)現(xiàn)：
HTML5監(jiān)聽攔截Android返回鍵方法如下：
1隐锭、監(jiān)聽popstate事件
window.addEventListener("popstate", function(){
? ? //doSomething
}, false)
2窃躲、取消默認(rèn)的返回操作，即監(jiān)聽攔截返回鍵：添加一條空的 history 實(shí)體作為替代原來的 history實(shí)體
window.history.pushState(null, null, "#");
舉例：
<!DOCTYPE html>
<html>
? <meta name="viewport" content="width=device-width">
? <script type="text/javascript">
? ? var count = 0 ;
? ? window.history.pushState(null, null, "#");
? ? window.addEventListener("popstate", function(e) {
? ? ? ? window.history.pushState(null, null, "#");
? ? ? ? document.getElementById('logView').innerHTML = "用戶點(diǎn)擊返回" + (++count)
? ? })
? </script>
<body>
? <p id="logView">test</p>
</body>
</html>
最后想要了解更多關(guān)于web前端方面內(nèi)容的小伙伴钦睡，請(qǐng)關(guān)注小猿圈官網(wǎng)蒂窒，小猿圈竭力為你提供更全面更有競爭力的視頻web前端自學(xué)②群：738735873，希望對(duì)你有所幫助荞怒。
