欣迪

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

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

範例如下:

// 以 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

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

作者介紹 - 欣迪

欣迪

從設計到寫程式,發現自己有追求前端技巧的自虐傾向。不斷的踩坑,再從坑裡爬出來,慢慢對攀岩有點心得。 目前在多間公司擔任網站設計顧問。 同時也是網站架設公司負責人。