解決微信內(nèi)置瀏覽器返回上一頁強(qiáng)制刷新問題方法
微信內(nèi)置瀏覽器在返回上一頁面，且上一頁面包含AJAX代碼時，頁面就會被強(qiáng)制刷新，極度影響用戶體驗(yàn)。而我們想要的效果是：返回上一頁面時，頁面還停留在原來的狀態(tài)，AJAX獲取到的數(shù)據(jù)還在，滾動條也在原來的位置。
BINGO~
通過HTML5的history API + 緩存可以做到這一點(diǎn)。
執(zhí)行原理：
1.0、通過history API的 history.pushState或 history.replaceState 保存AJAX狀態(tài)；
2.0、同時將AJAX獲取到的數(shù)據(jù)緩存起來（可以考慮使用H5的localStorage或sessionstorage）；
3.0、當(dāng)返回到這個頁面時，先獲取窗口的history.state，如果不為空，表示保存的有狀態(tài)，我們要做的就是恢復(fù)到這個狀態(tài)；
4.0、讀取緩存數(shù)據(jù)并加載。如果涉及到分頁，且是滾動加載的形式，需要將當(dāng)前頁設(shè)置為history.state中的頁數(shù)。
使用技術(shù)點(diǎn)介紹：
history API：
HTML5 history API只包括2個方法：history.pushState()和history.replaceState()，以及1個事件：window.onpopstate。
①history.pushState()
它的完全體是 history.pushState(stateObject, title, url)，包括三個參數(shù)。
第1個參數(shù)是狀態(tài)對象，它可以理解為一個拿來存儲自定義數(shù)據(jù)的元素。它和同時作為參數(shù)的url會關(guān)聯(lián)在一起。
第2個參數(shù)是標(biāo)題，是一個字符串，目前各類瀏覽器都會忽略它（以后才有可能啟用，用作頁面標(biāo)題），所以設(shè)置成什么都沒關(guān)系。目前建議設(shè)置為空字符串。
第3個參數(shù)是URL地址，一般會是簡單的?page=2這樣的參數(shù)風(fēng)格的相對路徑，它會自動以當(dāng)前URL為基準(zhǔn)。需要注意的是，本參數(shù)URL需要和當(dāng)前頁面URL同源，否則會拋出錯誤。
調(diào)用pushState()方法將新生成一條歷史記錄，方便用瀏覽器的“后退”和“前進(jìn)”來導(dǎo)航（“后退”可是相當(dāng)常用的按鈕）。另外，從URL的同源策略可以看出，HTML5 history API的出發(fā)點(diǎn)是很明確的，就是讓無跳轉(zhuǎn)的單站點(diǎn)也可以將它的各個狀態(tài)保存為瀏覽器的多條歷史記錄。當(dāng)通過歷史記錄重新加載站點(diǎn)時，站點(diǎn)可以直接加載到對應(yīng)的狀態(tài)。
②history.replaceState()
它和history.pushState()方法基本相同，區(qū)別只有一點(diǎn)，history.replaceState()不會新生成歷史記錄，而是將當(dāng)前歷史記錄替換掉。
③window.onpopstate
push的對立就是pop，可以猜到這個事件是在瀏覽器取出歷史記錄并加載時觸發(fā)的。但實(shí)際上，它的條件是比較苛刻的，幾乎只有點(diǎn)擊瀏覽器的“前進(jìn)”、“后退”這些導(dǎo)航按鈕，或者是由JavaScript調(diào)用的history.back()等導(dǎo)航方法，且切換前后的兩條歷史記錄都屬于同一個網(wǎng)頁文檔，才會觸發(fā)本事件。
上面的“同一個網(wǎng)頁文檔”請理解為JavaScript環(huán)境的document是同一個，而不是指基礎(chǔ)URL（去掉各類參數(shù)的）相同。也就是說，只要有重新加載發(fā)生（無論是跳轉(zhuǎn)到一個新站點(diǎn)還是繼續(xù)在本站點(diǎn)），JavaScript全局環(huán)境發(fā)生了變化，popstate事件都不會觸發(fā)。
popstate事件是設(shè)計(jì)出來和前面的2個方法搭配使用的。一般只有在通過前面2個方法設(shè)置了同一站點(diǎn)的多條歷史記錄，并在其之間導(dǎo)航（前進(jìn)或后退）時，才會觸發(fā)這個事件。同時，前面2個方法所設(shè)置的狀態(tài)對象（第1個參數(shù)），也會在這個時候通過事件的event.state返還回來。
以上就是本文的全部內(nèi)容，希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作能帶來一定的幫助，同時也希望多多支持腳本之家！
相關(guān)文章
微信小程序?qū)崿F(xiàn)發(fā)微博功能的示例代碼
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)發(fā)微博功能,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2020-06-06
詳解WordPress開發(fā)中g(shù)et_current_screen()函數(shù)的使用
這篇文章主要介紹了WordPress開發(fā)中g(shù)et_current_screen()函數(shù)的使用,get_current_screen()通常在對象的實(shí)例化時使用,需要的朋友可以參考下2016-01-01
這篇文章主要介紹了js中的new?Map的用法示例小結(jié),本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友參考下吧2024-03-03
防止動態(tài)加載JavaScript引起的內(nèi)存泄漏問題
利用Script標(biāo)簽可以跨域加載并運(yùn)行一段JavaScript腳本， 但Neil Fraser先前已指出，腳本運(yùn)行后資源并沒被釋放，即使是Script標(biāo)簽移除后。2009-10-10
requirejs是一個JavaScript文件和模塊加載器。requireJS允許你把你的javascript代碼獨(dú)立成文件和模塊，同時管理每個模塊間的依賴關(guān)系。本文主要對require.js的使用與工作原理進(jìn)行系統(tǒng)介紹。需要的朋友來看下吧2016-12-12
JavaScript中,可以使用解構(gòu)賦值的方式來對數(shù)組或者對象進(jìn)行變量解構(gòu),下面小編就來為大家詳細(xì)介紹一下JavaScript實(shí)現(xiàn)數(shù)組或者對象解構(gòu)的方法吧2023-11-11
下面小編就為大家?guī)硪黄褂肧VG基本操作API的實(shí)例講解。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-09-09
最近接了個項(xiàng)目，其中有項(xiàng)目需求是這樣的，需要復(fù)制內(nèi)容到剪切板，因?yàn)橛斜姸酁g覽器，所以兼容性很重要，下面通過本文給大家介紹Javascript復(fù)制實(shí)例詳解，對js復(fù)制相關(guān)知識感興趣的朋友一起學(xué)習(xí)吧2016-01-01
關(guān)于恒等于（===）和非恒等于（!==）...2007-08-08
詳解微信小程序開發(fā)—你期待的分享功能來了，微信小程序序新增5大功能
微信小程序在12月21日發(fā)布了新版本的開發(fā)工具，并在官網(wǎng)公布新增分享、模板消息、客服消息、掃一掃、帶參數(shù)二維碼功能。2016-12-12