欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

解決微信內(nèi)置瀏覽器返回上一頁強(qiáng)制刷新問題方法

 更新時間:2017年02月05日 12:17:21   作者:likar  
微信內(nèi)置瀏覽器在返回上一頁面,且上一頁面包含AJAX代碼時,頁面就會被強(qiáng)制刷新,極度影響用戶體驗。而我們想要的效果是:返回上一頁面時,頁面還停留在原來的狀態(tài),AJAX獲取到的數(shù)據(jù)還在,滾動條也在原來的位置。下面跟著小編一起來看下吧

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

BINGO~

通過HTML5history API + 緩存可以做到這一點。

執(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ù)點介紹:

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ā)點是很明確的,就是讓無跳轉(zhuǎn)的單站點也可以將它的各個狀態(tài)保存為瀏覽器的多條歷史記錄。當(dāng)通過歷史記錄重新加載站點時,站點可以直接加載到對應(yīng)的狀態(tài)。

②history.replaceState()

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

③window.onpopstate

push的對立就是pop,可以猜到這個事件是在瀏覽器取出歷史記錄并加載時觸發(fā)的。但實際上,它的條件是比較苛刻的,幾乎只有點擊瀏覽器的“前進(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)到一個新站點還是繼續(xù)在本站點),JavaScript全局環(huán)境發(fā)生了變化,popstate事件都不會觸發(fā)。

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

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

相關(guān)文章

最新評論