解決 ios ( Safari ) 返回後頁面不刷新的問題

在作H5項目的時候，在ios下當咱們點擊左上角的返回按鈕，或者安卓上點擊後退的時候，發生了兩個難以想象的事情：

一、頁面沒有刷新，而是直接讀取的緩存。 二、頁面上綁定在window上的事件莫名其妙的消失了（例如onscroll）

這個時候，確定就很天然的聯想到了多是微信內核引發的，二微信這次換內核，更換成的是蘋果的 WKWebview 內核。Safari很早以前就使用了這個內核，並且微信官方明確表示，更換後，將和Safari 表現出高度的類似性。

因此這個問題就被我當成了 Safari的bug去搜，果真，最終解決辦法以下：

var browserRule = /^.*((iPhone)|(iPad)|(Safari))+.*$/;
    if (browserRule.test(navigator.userAgent)) {
        window.onpageshow = function(event) {
            if (event.persisted) {
                window.location.reload()
            }
        };
    }
複製代碼

首先，咱們須要斷定它是 iPhone、iPad或者Safari 的一種，而後針對他們進行特殊處理。

window.onpageshow 是會在頁面加載顯示後觸發，onpageshow 事件相似於 onload 事件，onload 事件在頁面第一次加載時觸發， onpageshow 事件在每次加載頁面時觸發，即 onload 事件在頁面從瀏覽器緩存中讀取時不觸發。

爲了查看頁面是直接從服務器上載入仍是從緩存中讀取，你可使用 PageTransitionEvent 對象的 persisted 屬性來判斷。 若是頁面從瀏覽器的緩存中讀取該屬性返回 ture，不然返回 false。如上代碼所示，若是是從緩存加載的，就刷新頁面。

以前，reload方法被微信無情的槍斃掉了，可是換了內核以後，這個方法是好用的。