
最近做了一個線上心理測驗的專案。依照測驗的結果,會導向不同的分享頁面。
業主有一個要求,就是進入結果頁之前必須有一個淡出的轉場效果。
範例如下:
// 以 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() } });