javascript解決在safari瀏覽器中使用history.back()返回上一頁后頁面不會刷新的問題

我們知道，在JavaScript中提供了一個window.history.back()方法用於返回上一頁，另外也可以使用window.history.go(-1)返回上一頁（跳轉）。

在其他的主流瀏覽器中（Chrome、Firefox等），使用這兩個方法都會重新執行返回頁面的JS。

這就意味着，當文檔加載完成事件函數中有刷新頁面的操作代碼的情況下，上一個頁面會刷新。

但是在Safari瀏覽器中則情況有一些不同。

在實際測試中，在移動端中Android設備都會刷新，但是在IOS設備的Safari瀏覽器中卻不會，這是因為Safari瀏覽器不會重新執行返回頁面的JS導致的問題。

那么我們就可以通過窗體顯示隱藏的監聽事件（HTML5中新增的onpageshow和onpagehide）來對頁面進行手動刷新操作。

$(function () {
    var isPageHide = false;
    window.addEventListener('pageshow', function () {
        if (isPageHide) {
            window.location.reload();
        }
    });
    window.addEventListener('pagehide', function () {
        isPageHide = true;
    });
})

將上面這段代碼添加在文檔加載完成事件中，就能在返回上一頁的時候觸發窗體刷新的方法了。

這里有一些疑問，既然說這個問題是因為Safari瀏覽器返回上一頁不會重新執行返回頁面的JS導致的，為什么上面這段JS代碼也會被執行呢，這里簡單說一下原因。

在Safari瀏覽器中，有一個bfcache（Back-Forward Cache，往返緩存）緩存整個頁面的特性。當頁面在bfcache中的時候，由於內存中保存了整個頁面的狀態，當從內存中再次取出該頁面的情況下，也就不會再觸發load事件了。而不同於onload事件只會在文檔加載完成之后執行一次，onpageshow事件和onpagehide事件一旦被綁定了，在每次窗體顯示隱藏都會被執行。這就意味着，不管頁面在不在bfcache中，這兩個監聽事件都會被執行。另外JavaScript中的PageTransitionEvent對象還提供了一個persisted布爾值屬性來判斷頁面是否從緩存中讀取。

window.addEventListener('pageshow', function (e) {
    console.log(e.persisted);
});

如果該頁面是從緩存中讀取出來的，則打印true，否則打印false。

 

"表面越是波瀾不驚的人，內心越是有一些不為人知的辛酸。"