1. 程式人生 > >移動端點選返回鍵,頁面不重新整理解決方案

移動端點選返回鍵,頁面不重新整理解決方案

今天分享下,在瀏覽器中點選返回或者前進按鈕時,頁面不重新整理的問題。這個問題存在於移動端居多,尤其是蘋果手機。我們一起看看這到底是怎麼一回事!
如果是移動端下,可能有兩種情況:
第一種是在自己的app下點選返回的時候頁面不重新整理,這有可能是你們原生開發人員,只是關閉了當前的一個視窗,也就是說那個視窗是新開的。這種解決方案,老夫只能說找你們的原生開發吧。

第二種則是在微信、uc這類的瀏覽器出現,這是因為瀏覽器儲存了DOM和js的狀態,相當於儲存了整個頁面,這種特性稱作 “往返快取”(back-forward cache,或bfcache)。
對於這種情況可以用“pageshow”事件來解決,“pageshow

”事件表示瀏覽器展示文件的時候觸發,並且是在“onload”事件之後觸發。如果瀏覽器是存在往返快取機制的話,那麼onload事件就只會觸發一次,而“pageshow”事件則每次都會觸發。這裡需要注意“pageshow”事件必須繫結在window這個物件中,如下程式碼:

window.addEventListener('pageshow', function(event) {
    //event.persisted屬性為true時,表示當前文件是從往返快取中獲取
    if(event.persisted) location.reload();  
});

所以可根據以上方法來讓瀏覽器重新整理。