微信內(nèi)置瀏覽器在返回上一頁面，且上一頁面包含AJAX代碼時(shí)，頁面就會(huì)被強(qiáng)制刷新，極度影響用戶體驗(yàn)。而我們想要的效果是：返回上一頁面時(shí)，頁面還停留在原來的狀態(tài)，AJAX獲取到的數(shù)據(jù)還在，滾動(dòng)條也在原來的位置。

BINGO~

通過HTML5的history API + 緩存可以做到這一點(diǎn)。

執(zhí)行原理：

1.0、通過history API的 history.pushState或 history.replaceState 保存AJAX狀態(tài)；

2.0、同時(shí)將AJAX獲取到的數(shù)據(jù)緩存起來（可以考慮使用H5的localStorage或sessionstorage）；

3.0、當(dāng)返回到這個(gè)頁面時(shí)，先獲取窗口的history.state，如果不為空，表示保存的有狀態(tài)，我們要做的就是恢復(fù)到這個(gè)狀態(tài)；

4.0、讀取緩存數(shù)據(jù)并加載。如果涉及到分頁，且是滾動(dòng)加載的形式，需要將當(dāng)前頁設(shè)置為history.state中的頁數(shù)。

使用技術(shù)點(diǎn)介紹：

history API：

HTML5 history API只包括2個(gè)方法：history.pushState()和history.replaceState()，以及1個(gè)事件：window.onpopstate。

①history.pushState()

它的完全體是 history.pushState(stateObject, title, url)，包括三個(gè)參數(shù)。

第1個(gè)參數(shù)是狀態(tài)對(duì)象，它可以理解為一個(gè)拿來存儲(chǔ)自定義數(shù)據(jù)的元素。它和同時(shí)作為參數(shù)的url會(huì)關(guān)聯(lián)在一起。

第2個(gè)參數(shù)是標(biāo)題，是一個(gè)字符串，目前各類瀏覽器都會(huì)忽略它（以后才有可能啟用，用作頁面標(biāo)題），所以設(shè)置成什么都沒關(guān)系。目前建議設(shè)置為空字符串。

第3個(gè)參數(shù)是URL地址，一般會(huì)是簡(jiǎn)單的?page=2這樣的參數(shù)風(fēng)格的相對(duì)路徑，它會(huì)自動(dòng)以當(dāng)前URL為基準(zhǔn)。需要注意的是，本參數(shù)URL需要和當(dāng)前頁面URL同源，否則會(huì)拋出錯(cuò)誤。

調(diào)用pushState()方法將新生成一條歷史記錄，方便用瀏覽器的“后退”和“前進(jìn)”來導(dǎo)航（“后退”可是相當(dāng)常用的按鈕）。另外，從URL的同源策略可以看出，HTML5 history API的出發(fā)點(diǎn)是很明確的，就是讓無跳轉(zhuǎn)的單站點(diǎn)也可以將它的各個(gè)狀態(tài)保存為瀏覽器的多條歷史記錄。當(dāng)通過歷史記錄重新加載站點(diǎn)時(shí)，站點(diǎn)可以直接加載到對(duì)應(yīng)的狀態(tài)。

②history.replaceState()

它和history.pushState()方法基本相同，區(qū)別只有一點(diǎn)，history.replaceState()不會(huì)新生成歷史記錄，而是將當(dāng)前歷史記錄替換掉。

③window.onpopstate

push的對(duì)立就是pop，可以猜到這個(gè)事件是在瀏覽器取出歷史記錄并加載時(shí)觸發(fā)的。但實(shí)際上，它的條件是比較苛刻的，幾乎只有點(diǎn)擊瀏覽器的“前進(jìn)”、“后退”這些導(dǎo)航按鈕，或者是由JavaScript調(diào)用的history.back()等導(dǎo)航方法，且切換前后的兩條歷史記錄都屬于同一個(gè)網(wǎng)頁文檔，才會(huì)觸發(fā)本事件。

上面的“同一個(gè)網(wǎng)頁文檔”請(qǐng)理解為JavaScript環(huán)境的document是同一個(gè)，而不是指基礎(chǔ)URL（去掉各類參數(shù)的）相同。也就是說，只要有重新加載發(fā)生（無論是跳轉(zhuǎn)到一個(gè)新站點(diǎn)還是繼續(xù)在本站點(diǎn)），JavaScript全局環(huán)境發(fā)生了變化，popstate事件都不會(huì)觸發(fā)。

popstate事件是設(shè)計(jì)出來和前面的2個(gè)方法搭配使用的。一般只有在通過前面2個(gè)方法設(shè)置了同一站點(diǎn)的多條歷史記錄，并在其之間導(dǎo)航（前進(jìn)或后退）時(shí)，才會(huì)觸發(fā)這個(gè)事件。同時(shí)，前面2個(gè)方法所設(shè)置的狀態(tài)對(duì)象（第1個(gè)參數(shù)），也會(huì)在這個(gè)時(shí)候通過事件的event.state返還回來。

以上就是本文的全部?jī)?nèi)容，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來一定的幫助，同時(shí)也希望多多支持腳本之家！

最新評(píng)論