javascript中的History對(duì)象怎么用

這篇文章主要介紹“javascript中的History對(duì)象怎么用”，在日常操作中，相信很多人在javascript中的History對(duì)象怎么用問(wèn)題上存在疑惑，小編查閱了各式資料，整理出簡(jiǎn)單好用的操作方法，希望對(duì)大家解答”javascript中的History對(duì)象怎么用”的疑惑有所幫助！接下來(lái)，請(qǐng)跟著小編一起來(lái)學(xué)習(xí)吧！

創(chuàng)新互聯(lián)建站專注于南潯企業(yè)網(wǎng)站建設(shè),自適應(yīng)網(wǎng)站建設(shè),電子商務(wù)商城網(wǎng)站建設(shè)。南潯網(wǎng)站建設(shè)公司,為南潯等地區(qū)提供建站服務(wù)。全流程按需策劃設(shè)計(jì)，專業(yè)設(shè)計(jì)，全程項(xiàng)目跟蹤，創(chuàng)新互聯(lián)建站專業(yè)和態(tài)度為您提供的服務(wù)

length

history.length屬性保存著歷史記錄的URL數(shù)量。初始時(shí)，該值為1。由于IE10+瀏覽器在初始時(shí)返回2，存在兼容性問(wèn)題，所以該值并不常用

跳轉(zhuǎn)方法

go()、back()和forward()

如果移動(dòng)的位置超出了訪問(wèn)歷史的邊界，以上三個(gè)方法并不報(bào)錯(cuò)，而是靜默失敗

[注意]使用歷史記錄時(shí)，頁(yè)面通常從瀏覽器緩存之中加載，而不是重新要求服務(wù)器發(fā)送新的網(wǎng)頁(yè)。不觸發(fā)onload

增改記錄

HTML5為history對(duì)象添加了兩個(gè)新方法，history.pushState()和history.replaceState()，用來(lái)在瀏覽歷史中添加和修改記錄。state屬性用來(lái)保存記錄對(duì)象，而popstate事件用來(lái)監(jiān)聽(tīng)history對(duì)象的變化

[注意]ie9不支持

【pushState()】

history.pushState()方法向?yàn)g覽器歷史添加了一個(gè)狀態(tài)。pushState()方法帶有三個(gè)參數(shù)：一個(gè)狀態(tài)對(duì)象、一個(gè)標(biāo)題(現(xiàn)在被忽略了)以及一個(gè)可選的URL地址

history.pushState(state, title, url);

state object —— 狀態(tài)對(duì)象是一個(gè)由pushState()方法創(chuàng)建的、與歷史紀(jì)錄相關(guān)的javascript對(duì)象。當(dāng)用戶定向到一個(gè)新的狀態(tài)時(shí)，會(huì)觸發(fā)popstate事件。事件的state屬性包含了歷史紀(jì)錄的state對(duì)象。如果不需要這個(gè)對(duì)象，此處可以填null

title —— 新頁(yè)面的標(biāo)題，但是所有瀏覽器目前都忽略這個(gè)值，因此這里可以填null

URL —— 這個(gè)參數(shù)提供了新歷史紀(jì)錄的地址。新URL必須和當(dāng)前URL在同一個(gè)域，否則，pushState()將丟出異常。這個(gè)參數(shù)可選，如果它沒(méi)有被特別標(biāo)注，會(huì)被設(shè)置為文檔的當(dāng)前URL

假定當(dāng)前網(wǎng)址是example.com/1.html，使用pushState方法在瀏覽記錄(history對(duì)象)中添加一個(gè)新記錄

var stateObj = { foo: 'bar' };
history.pushState(stateObj, 'page 2', '2.html');

添加上面這個(gè)新記錄后，瀏覽器地址欄立刻顯示example.com/2.html，但并不會(huì)跳轉(zhuǎn)到2.html，甚至也不會(huì)檢查2.html是否存在，它只是成為瀏覽歷史中的最新記錄。假如這時(shí)訪問(wèn)了google.com，然后點(diǎn)擊了倒退按鈕，頁(yè)面的url將顯示2.html，但是內(nèi)容還是原來(lái)的1.html。再點(diǎn)擊一次倒退按鈕，url將顯示1.html，內(nèi)容不變

總之，pushState方法不會(huì)觸發(fā)頁(yè)面刷新，只是導(dǎo)致history對(duì)象發(fā)生變化，地址欄的顯示地址發(fā)生變化

如果pushState的url參數(shù)，設(shè)置了一個(gè)新的錨點(diǎn)值(即hash)，并不會(huì)觸發(fā)hashchange事件，，即使新的URL和舊的只在hash上有區(qū)別

如果設(shè)置了一個(gè)跨域網(wǎng)址，則會(huì)報(bào)錯(cuò)。這樣設(shè)計(jì)的目的是，防止惡意代碼讓用戶以為他們是在另一個(gè)網(wǎng)站上

【replaceState()】

history.replaceState方法的參數(shù)與pushState方法一模一樣，不同之處在于replaceState()方法會(huì)修改當(dāng)前歷史記錄條目而并非創(chuàng)建新的條目

假定當(dāng)前網(wǎng)頁(yè)是example.com/example.html

history.pushState({page: 1}, 'title 1', '?page=1');
history.pushState({page: 2}, 'title 2', '?page=2');
history.replaceState({page: 3}, 'title 3', '?page=3');
history.back()
// url顯示為http://example.com/example.html?page=1
history.back()
// url顯示為http://example.com/example.html
history.go(2)
// url顯示為http://example.com/example.html?page=3

【state】

history.state屬性返回當(dāng)前頁(yè)面的state對(duì)象

history.pushState({page: 1}, 'title 1', '?page=1');
history.state// { page: 1 }

【popstate事件】

每當(dāng)同一個(gè)文檔的瀏覽歷史(即history對(duì)象)出現(xiàn)變化時(shí)，就會(huì)觸發(fā)popstate事件

[注意]需要注意的是，僅僅調(diào)用pushState方法或replaceState方法，并不會(huì)觸發(fā)該事件，只有用戶點(diǎn)擊瀏覽器倒退按鈕和前進(jìn)按鈕，或者使用javascript調(diào)用back()、forward()、go()方法時(shí)才會(huì)觸發(fā)。另外，該事件只針對(duì)同一個(gè)文檔，如果瀏覽歷史的切換，導(dǎo)致加載不同的文檔，該事件也不會(huì)觸發(fā)

使用的時(shí)候，可以為popstate事件指定回調(diào)函數(shù)。這個(gè)回調(diào)函數(shù)的參數(shù)是一個(gè)event事件對(duì)象，它的state屬性指向pushState和replaceState方法為當(dāng)前URL所提供的狀態(tài)對(duì)象(即這兩個(gè)方法的第一個(gè)參數(shù))

上面代碼中的event.state，就是通過(guò)pushState和replaceState方法，為當(dāng)前URL綁定的state對(duì)象

這個(gè)state對(duì)象也可以直接通過(guò)history對(duì)象讀取

　　var currentState = history.state;

往返緩存

默認(rèn)情況下，瀏覽器會(huì)在當(dāng)前會(huì)話(session)緩存頁(yè)面，當(dāng)用戶點(diǎn)擊“前進(jìn)”或“后退”按鈕時(shí)，瀏覽器就會(huì)從緩存中加載頁(yè)面

瀏覽器有一個(gè)特性叫“往返緩存”(back-forward cache或bfcache)，可以在用戶使用瀏覽器的“后退”和“前進(jìn)”按鈕時(shí)加快頁(yè)面的轉(zhuǎn)換速度。這個(gè)緩存中不僅保存著頁(yè)面數(shù)據(jù)，還保存了DOM和javascript的狀態(tài)；實(shí)際上是將整個(gè)頁(yè)面都保存在了內(nèi)存里。如果頁(yè)面位于bfcache中，那么再次打開(kāi)該頁(yè)面時(shí)就不會(huì)觸發(fā)load事件

[注意]IE10-瀏覽器不支持

【pageshow】

pageshow事件在頁(yè)面加載時(shí)觸發(fā)，包括第一次加載和從緩存加載兩種情況。如果要指定頁(yè)面每次加載(不管是不是從瀏覽器緩存)時(shí)都運(yùn)行的代碼，可以放在這個(gè)事件的監(jiān)聽(tīng)函數(shù)

第一次加載時(shí)，它的觸發(fā)順序排在load事件后面。從緩存加載時(shí)，load事件不會(huì)觸發(fā)，因?yàn)榫W(wǎng)頁(yè)在緩存中的樣子通常是load事件的監(jiān)聽(tīng)函數(shù)運(yùn)行后的樣子，所以不必重復(fù)執(zhí)行。同理，如果是從緩存中加載頁(yè)面，網(wǎng)頁(yè)內(nèi)初始化的JavaScript腳本(比如DOMContentLoaded事件的監(jiān)聽(tīng)函數(shù))也不會(huì)執(zhí)行

[注意]雖然這個(gè)事件的目標(biāo)是document，但必須將其事件處理程序添加到window

pageshow事件有一個(gè)persisted屬性，返回一個(gè)布爾值。頁(yè)面第一次加載時(shí)或沒(méi)有從緩存加載時(shí)，這個(gè)屬性是false；當(dāng)頁(yè)面從緩存加載時(shí)，這個(gè)屬性是true

[注意]上面的例子使用了私有作用域，以防止變量showCount進(jìn)入全局作用域。如果單擊了瀏覽器的“刷新”按鈕，那么showCount的值就會(huì)被重置為0，因?yàn)轫?yè)面已經(jīng)完全重新加載了

【pagehide】

與pageshow事件對(duì)應(yīng)的是pagehide事件，該事件會(huì)在瀏覽器卸載頁(yè)面的時(shí)候觸發(fā)，而且是在unload事件之前觸發(fā)。與pageshow事件一樣，pagehide在document上面觸發(fā)，但其事件處理程序必須要添加到window對(duì)象

[注意]指定了onunload事件處理程序的頁(yè)面會(huì)被自動(dòng)排除在bfcache之外，即使事件處理程序是空的。原因在于，onunload最常用于撤銷(xiāo)在onload中所執(zhí)行的操作，而跳過(guò)onload后再次顯示頁(yè)面很可能就會(huì)導(dǎo)致頁(yè)面不正常

pagehide事件的event對(duì)象也包含persisted屬性，不過(guò)其用途稍有不同。如果頁(yè)面是從bfcache中加載的，那么persisted的值就是true；如果頁(yè)面在卸載之后會(huì)被保存在bfcache中，那么persisted的值也會(huì)被設(shè)置為true。因此，當(dāng)?shù)谝淮斡|發(fā)pageshow時(shí)，persisted的值一定是false，而在第一次觸發(fā)pagehide時(shí)，persisted就會(huì)變成true(除非頁(yè)面不會(huì)被保存在bfcache中)

window.onpagehide = function(e){
e = e || event;
console.log(e.persisted);
}

使用方法：

1、取消默認(rèn)的返回操作

function pushHistory(){
 var state = {
    title: "title",
    url: "#"   
  }
 window.history.pushState(state, "title", "#");  
}

pushHistory()

2、history.js用于兼容html4，也可以監(jiān)聽(tīng)pushState與replaceSate

到此，關(guān)于“javascript中的History對(duì)象怎么用”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實(shí)踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識(shí)，請(qǐng)繼續(xù)關(guān)注創(chuàng)新互聯(lián)網(wǎng)站，小編會(huì)繼續(xù)努力為大家?guī)?lái)更多實(shí)用的文章！

本文標(biāo)題：javascript中的History對(duì)象怎么用
文章源于：http://muchs.cn/article46/gesphg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供面包屑導(dǎo)航、定制網(wǎng)站、搜索引擎優(yōu)化、動(dòng)態(tài)網(wǎng)站、網(wǎng)站策劃、做網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)