IT僧

使用 onpageshow ，強迫回到這個頁面時，重新整理

22 8 月, 2022 欣迪

最近做了一個線上心理測驗的專案。依照測驗的結果，會導向不同的分享頁面。

業主有一個要求，就是進入結果頁之前必須有一個淡出的轉場效果。

範例如下：

// 以 jQuery 為範例。結果出現時， body 淡出，再重新導向到指定的 URL
function goToSharePage(url) {
  	jQuery("body").fadeOut("slow", () => {
      location.href = url
    })
}

乍看之下，只是一個超級簡單的轉場效果。在大部分的瀏覽器也運作良好，但在我在使用 Pixel 4 的 Chrome 測試時，一但轉跳到結果頁面，回到上一頁都是一片空白。而且只有 Chrome ， 使用 Line 和 Facebook 的 webview 都是正常。

接上電腦後發現 body 的 opacity 一直是維持在 0。也就是說，手機版的 Chrome 會對你上一個頁面狀態進行快取。解決方法也很簡單，使用 onpageshow 這個事件即可，範例如下：

window.addEventListener('pageshow', function(event) {
    if (event.persisted) {
        window.location.reload()
    }
});

訂閱 IT-Monk

訂閱最新文章的發布消息! 😚😚😚

姓名

Email*