《解決微信內置瀏覽器返回上一頁強制刷新問題方法》

微信內置瀏覽器在返回上一頁面，且上一頁面包含AJAX代碼時，頁面就會被強制刷新，極度影響用戶體驗。而咱們想要的效果是：返回上一頁面時，頁面還停留在原來的狀態，AJAX獲取到的數據還在，滾動條也在原來的位置。

BINGO~

經過HTML5的history API + 緩存能夠作到這一點。

 

執行原理：

1.0、經過history API的 history.pushState或 history.replaceState 保存AJAX狀態；

2.0、同時將AJAX獲取到的數據緩存起來（能夠考慮使用H5的localStorage或sessionstorage）；

3.0、當返回到這個頁面時，先獲取窗口的history.state，若是不爲空，表示保存的有狀態，咱們要作的就是恢復到這個狀態；

4.0、讀取緩存數據並加載。若是涉及到分頁，且是滾動加載的形式，須要將當前頁設置爲history.state中的頁數。

 

使用技術點介紹：

history API：

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

①history.pushState()

它的徹底體是 history.pushState(stateObject, title, url)，包括三個參數。

第1個參數是狀態對象，它能夠理解爲一個拿來存儲自定義數據的元素。它和同時做爲參數的url會關聯在一塊兒。

第2個參數是標題，是一個字符串，目前各種瀏覽器都會忽略它（之後纔有可能啓用，用做頁面標題），因此設置成什麼都不要緊。目前建議設置爲空字符串。

第3個參數是URL地址，通常會是簡單的?page=2這樣的參數風格的相對路徑，它會自動以當前URL爲基準。須要注意的是，本參數URL須要和當前頁面URL同源，不然會拋出錯誤。

調用pushState()方法將新生成一條歷史記錄，方便用瀏覽器的「後退」和「前進」來導航（「後退」但是至關經常使用的按鈕）。另外，從URL的同源策略能夠看出，HTML5 history API的出發點是很明確的，就是讓無跳轉的單站點也能夠將它的各個狀態保存爲瀏覽器的多條歷史記錄。當經過歷史記錄從新加載站點時，站點能夠直接加載到對應的狀態。

 

②history.replaceState()

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

 

③window.onpopstate

push的對立就是pop，能夠猜到這個事件是在瀏覽器取出歷史記錄並加載時觸發的。但實際上，它的條件是比較苛刻的，幾乎只有點擊瀏覽器的「前進」、「後退」這些導航按鈕，或者是由JavaScript調用的history.back()等導航方法，且切換先後的兩條歷史記錄都屬於同一個網頁文檔，纔會觸發本事件。

 

上面的「同一個網頁文檔」請理解爲JavaScript環境的document是同一個，而不是指基礎URL（去掉各種參數的）相同。也就是說，只要有從新加載發生（不管是跳轉到一個新站點仍是繼續在本站點），JavaScript全局環境發生了變化，popstate事件都不會觸發。

 

popstate事件是設計出來和前面的2個方法搭配使用的。通常只有在經過前面2個方法設置了同一站點的多條歷史記錄，並在其之間導航（前進或後退）時，纔會觸發這個事件。同時，前面2個方法所設置的狀態對象（第1個參數），也會在這個時候經過事件的event.state返還回來。

詳細的代碼示例能夠點擊這裏查看(傳送門)

其餘參考：http://www.aiuxian.com/article/p-2003928.html

技術推薦：Pjax ： http://www.qingzz.cn/pjax_reference_translation  

                              http://www.oschina.net/question/12_48388

                   自定義返回按鈕：http://blog.csdn.net/u012076852/article/details/51364857

                    pjax表單提交：https://www.uedsc.com/jquery-pjax-js.html

                    返回後以前註冊的事件無響應：http://tv1314.com/post-233.html

 

mobilebone : http://www.zhangxinxu.com/wordpress/2014/10/mobilebone-js-mobile-web-app-core/

                      http://www.mobilebone.org/