您好,登錄后才能下訂單哦!
這篇文章主要為大家展示了“HTML5中history怎么用”,內(nèi)容簡(jiǎn)而易懂,條理清晰,希望能夠幫助大家解決疑惑,下面讓小編帶領(lǐng)大家一起研究并學(xué)習(xí)一下“HTML5中history怎么用”這篇文章吧。
一、認(rèn)識(shí)window.history
window.history表示window對(duì)象的歷史記錄,是由用戶主動(dòng)產(chǎn)生,并且接受javascript腳本控制的全局對(duì)象。window對(duì)象通過history對(duì)象提供對(duì)覽器歷史記錄的訪問能力。它暴露了一些非常有用的方法和屬性,讓你在歷史記錄中自由前進(jìn)和后退。
1、歷史記錄的前進(jìn)和后退
在歷史記錄中后退,可以這么做:
window.history.back();
這就像用戶點(diǎn)擊瀏覽器的后退按鈕一樣。
類似的,你可以前進(jìn),就像在瀏覽器中點(diǎn)擊前進(jìn)按鈕,像這樣:
window.history.forward();
2、移動(dòng)到指定歷史記錄點(diǎn)
通過指定一個(gè)相對(duì)于當(dāng)前頁(yè)面位置的數(shù)值,你可以使用go()方法從當(dāng)前會(huì)話的歷史記錄中加載頁(yè)面(當(dāng)前頁(yè)面位置索引值為0,上一頁(yè)就是-1,下一頁(yè)為1)。
要后退一頁(yè)(相當(dāng)于調(diào)用back()):
window.history.go(-1);
向前移動(dòng)一頁(yè)(相當(dāng)于調(diào)用forward()):
window.history.go(1);
類似的,傳遞參數(shù)“2”,你就可以向前移動(dòng)2個(gè)記錄點(diǎn)。你可以查看length屬性值,了解歷史記錄棧中一共有多少個(gè)記錄點(diǎn):
window.history.length;
二、修改歷史記錄點(diǎn)
HTML5的新API擴(kuò)展了window.history,使歷史記錄點(diǎn)更加開放了??梢源鎯?chǔ)當(dāng)前歷史記錄點(diǎn)、替換當(dāng)前歷史記錄點(diǎn)、監(jiān)聽歷史記錄點(diǎn),下面逐一簡(jiǎn)要說明一下。
1、存儲(chǔ)當(dāng)前歷史記錄點(diǎn)
存儲(chǔ)的方式類似于數(shù)組的入棧(Array.push()),在window.history里新增一個(gè)歷史記錄點(diǎn),例如:
// 當(dāng)前的url為:http://qianduanblog.com/index.html var json={time:new Date().getTime()}; // @狀態(tài)對(duì)象:記錄歷史記錄點(diǎn)的額外對(duì)象,可以為空 // @頁(yè)面標(biāo)題:目前所有瀏覽器都不支持 // @可選的url:瀏覽器不會(huì)檢查url是否存在,只改變url,url必須同域,不能跨域 window.history.pushState(json,"","http://qianduanblog.com/post-1.html");
執(zhí)行了pushState方法后,頁(yè)面的url地址為qianduanblog.com/post-1.html。
2、替換當(dāng)前歷史記錄點(diǎn)
window.history.replaceState和window.history.pushState類似,不同之處在于replaceState不會(huì)在window.history里新增歷史記錄點(diǎn),其效果類似于window.location.replace(url),都是不會(huì)在歷史記錄點(diǎn)里新增一個(gè)記錄點(diǎn)的。當(dāng)你為了響應(yīng)用戶的某些操作,而要更新當(dāng)前歷史記錄條目的狀態(tài)對(duì)象或URL時(shí),使用replaceState()方法會(huì)特別合適。
3、監(jiān)聽歷史記錄點(diǎn)
監(jiān)聽歷史記錄點(diǎn),直觀的可認(rèn)為是監(jiān)聽URL的變化,但會(huì)忽略URL的hash部分,監(jiān)聽URL的hash部分,HTML5有新的API為onhashchange,我的博客里也有說到該方法和跨瀏覽器的兼容解決方案??梢酝ㄟ^window.onpopstate來監(jiān)聽url的變化,并且可以獲取存儲(chǔ)在該歷史記錄點(diǎn)的狀態(tài)對(duì)象,也就是上文說到的json對(duì)象,如:
// 當(dāng)前的url為:http://qianduanblog.com/post-1.html window.onpopstate=function() { // 獲得存儲(chǔ)在該歷史記錄點(diǎn)的json對(duì)象 var json=window.history.state; // 點(diǎn)擊一次回退到:http://qianduanblog.com/index.html // 獲得的json為null // 再點(diǎn)擊一次前進(jìn)到:http://qianduanblog.com/post-1.html // 獲得json為{time:1369647895656} }
值得注意的是:javascript腳本執(zhí)行window.history.pushState和window.history.replaceState不會(huì)觸發(fā)onpopstate事件。
還有一點(diǎn)注意的是,谷歌瀏覽器和火狐瀏覽器在頁(yè)面第一次打開的反應(yīng)是不同的,谷歌瀏覽器奇怪的是回觸發(fā)onpopstate事件,而火狐瀏覽器則不會(huì)。
以上是“HTML5中history怎么用”這篇文章的所有內(nèi)容,感謝各位的閱讀!相信大家都有了一定的了解,希望分享的內(nèi)容對(duì)大家有所幫助,如果還想學(xué)習(xí)更多知識(shí),歡迎關(guān)注億速云行業(yè)資訊頻道!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。