1. 程式人生 > >popstata或onpageshow解決微信瀏覽器點選返回按鈕時讀取快取問題

popstata或onpageshow解決微信瀏覽器點選返回按鈕時讀取快取問題

在微信瀏覽器中,從一個html跳到另外一個html頁面後,點選瀏覽器自帶的歷史返回按鈕,或者在第二個頁面中呼叫history.back()等返回上一頁方法,在安卓中直接會返回上一頁(相當於重新載入上一頁所有內容和邏輯,js會重新在執行一遍),但是在蘋果端中,返回到上一頁是,瀏覽器會讀取快取中的頁面內容(回到上一頁,會保持跳轉時的狀態,包括剛才瀏覽的位置,但是js不會在重新執行,因為是直接讀取快取中的),這種快取被稱作“往返快取”,是為了提高使用者在觸發“返回”或者“前進”時頁面的響應速度。這個快取不僅儲存頁面所有資料,還儲存著頁面DOM和JS的狀態,如果頁面處於“往返快取”中,在次進入這個頁面將不會觸發 onload 事件。

蘋果系統的這種預設行為對於使用者瀏覽列表,點選某個單個產品,檢視詳情,在返回上一頁列表頁的情況下,表現較好,因為會保持狀態,預設回到上一個列表頁的位置,但是在需要根據介面返回code或者value去判斷某種狀態的時候會產生很多問題,因為js不會重新執行,所有判斷條件也就無法執行。所有當頁面被儲存在“往返快取”中,時,我們可以想辦法去不讓瀏覽器從快取中讀取頁面,而是重新載入頁面內容

解決方法:
1:


 window.addEventListener("popstate", function (e) {
      //檢測到使用者點選瀏覽器返回按鈕,進行操作
       console
.log(document.referrer); //使用href的形式去用跳轉的形式,跳轉到上一頁 document.location.href = document.referrer; }, false); var state = { title: "", url: "" }; window.history.pushState(state, "", "");

2:
onpageshow事件(這個事件在頁面顯示時觸發,如果頁面不在“往返快取”中,該事件將會在onload後觸發)
在onpageshow事件中,可以利用event.persisted

        window.addEventListener('pageshow', function(event) {
            alert(event.persisted);
            if (event.persisted) location.reload();    //如果檢測到頁面是從“往返快取”中讀取的,重新整理頁面
        });

3:
指定了 onunload 事件處理程式的頁面會被自動排除在 “往返快取”之外,即使事件
處理程式是空的。原因在於, onunload 最常用於撤銷在 onload 中所執行的操作,
而跳過 onload 後再次顯示頁面很可能就會導致頁面不正常。

        window.addEventListener('unload',function () {

        })