解決微信內(nèi)置瀏覽器返回上一頁(yè)強(qiáng)制刷新問(wèn)題方法
微信內(nèi)置瀏覽器在返回上一頁(yè)面,且上一頁(yè)面包含AJAX代碼時(shí),頁(yè)面就會(huì)被強(qiáng)制刷新,極度影響用戶體驗(yàn)。而我們想要的效果是:返回上一頁(yè)面時(shí),頁(yè)面還停留在原來(lái)的狀態(tài),AJAX獲取到的數(shù)據(jù)還在,滾動(dòng)條也在原來(lái)的位置。
BINGO~
通過(guò)HTML5的history API + 緩存可以做到這一點(diǎn)。
執(zhí)行原理:
1.0、通過(guò)history API的 history.pushState或 history.replaceState 保存AJAX狀態(tài);
2.0、同時(shí)將AJAX獲取到的數(shù)據(jù)緩存起來(lái)(可以考慮使用H5的localStorage或sessionstorage);
3.0、當(dāng)返回到這個(gè)頁(yè)面時(shí),先獲取窗口的history.state,如果不為空,表示保存的有狀態(tài),我們要做的就是恢復(fù)到這個(gè)狀態(tài);
4.0、讀取緩存數(shù)據(jù)并加載。如果涉及到分頁(yè),且是滾動(dòng)加載的形式,需要將當(dāng)前頁(yè)設(shè)置為history.state中的頁(yè)數(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è)拿來(lái)存儲(chǔ)自定義數(shù)據(jù)的元素。它和同時(shí)作為參數(shù)的url會(huì)關(guān)聯(lián)在一起。
第2個(gè)參數(shù)是標(biāo)題,是一個(gè)字符串,目前各類瀏覽器都會(huì)忽略它(以后才有可能啟用,用作頁(yè)面標(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)前頁(yè)面URL同源,否則會(huì)拋出錯(cuò)誤。
調(diào)用pushState()方法將新生成一條歷史記錄,方便用瀏覽器的“后退”和“前進(jìn)”來(lái)導(dǎo)航(“后退”可是相當(dāng)常用的按鈕)。另外,從URL的同源策略可以看出,HTML5 history API的出發(fā)點(diǎn)是很明確的,就是讓無(wú)跳轉(zhuǎn)的單站點(diǎn)也可以將它的各個(gè)狀態(tài)保存為瀏覽器的多條歷史記錄。當(dāng)通過(guò)歷史記錄重新加載站點(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)頁(yè)文檔,才會(huì)觸發(fā)本事件。
上面的“同一個(gè)網(wǎng)頁(yè)文檔”請(qǐng)理解為JavaScript環(huán)境的document是同一個(gè),而不是指基礎(chǔ)URL(去掉各類參數(shù)的)相同。也就是說(shuō),只要有重新加載發(fā)生(無(wú)論是跳轉(zhuǎn)到一個(gè)新站點(diǎn)還是繼續(xù)在本站點(diǎn)),JavaScript全局環(huán)境發(fā)生了變化,popstate事件都不會(huì)觸發(fā)。
popstate事件是設(shè)計(jì)出來(lái)和前面的2個(gè)方法搭配使用的。一般只有在通過(guò)前面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í)候通過(guò)事件的event.state返還回來(lái)。
以上就是本文的全部?jī)?nèi)容,希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來(lái)一定的幫助,同時(shí)也希望多多支持腳本之家!
相關(guān)文章
詳解微信小程序input標(biāo)簽正則初體驗(yàn)
這篇文章主要介紹了詳解微信小程序input標(biāo)簽正則初體驗(yàn),小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-08-08JS使用reduce()方法處理樹形結(jié)構(gòu)數(shù)據(jù)
這篇文章主要介紹了JS使用reduce()方法處理樹形結(jié)構(gòu)數(shù)據(jù),對(duì)樹形結(jié)構(gòu)數(shù)據(jù)感興趣的同學(xué),可以參考下2021-05-05JS+HTML5 Canvas實(shí)現(xiàn)簡(jiǎn)單的寫字板功能示例
這篇文章主要介紹了JS+HTML5 Canvas實(shí)現(xiàn)簡(jiǎn)單的寫字板功能,結(jié)合實(shí)例形式分析了js結(jié)合HTML5 canvas特性的圖形繪制相關(guān)操作技巧,需要的朋友可以參考下2018-08-08JS基于FileSystemObject創(chuàng)建一個(gè)指定路徑的TXT文本文件
這篇文章主要介紹了JS基于FileSystemObject創(chuàng)建一個(gè)指定路徑的TXT文本文件,涉及javascript使用ActiveXObject控件中FileSystemObject對(duì)象模型的基本技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-08-08JavaScript中Hoisting詳解 (變量提升與函數(shù)聲明提升)
函數(shù)聲明和變量聲明總是被JavaScript解釋器隱式地提升(hoist)到包含他們的作用域的最頂端。下面這篇文章主要給大家介紹了關(guān)于JavaScript中Hoisting(變量提升與函數(shù)聲明提升)的相關(guān)資料,需要的朋友可以參考借鑒,下面來(lái)一起看看吧。2017-08-08JavaScript函數(shù)防抖動(dòng)debounce
這篇文章主要介紹了JavaScript函數(shù)防抖動(dòng)debounce,防抖動(dòng)作用防止在短時(shí)間內(nèi)過(guò)于頻繁的執(zhí)行相同的任務(wù),更多相關(guān)內(nèi)容需要的小伙伴可以參考一下2022-06-06xml 與javascript結(jié)合的問(wèn)題解決方法
xml 與javascript結(jié)合的問(wèn)題解決方法...2007-03-03