本文和大家分享的主要是使用html5
監(jiān)聽攔截
android
返回鍵的相關(guān)內(nèi)容,一起來看看吧,希望對(duì)大家
學(xué)習(xí)html5
有所幫助。
瀏覽器窗口有一個(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>
來源:網(wǎng)絡(luò)