JavaScript 偵測 Request 來自瀏覽器的 Go Back (回到上一頁)

JavaScript 偵測 Request 來自瀏覽器的 Go Back (回到上一頁)

方法一:使用 popstate 判斷 

window.addEventListener("popstate", function (e) {
      //檢測到使用者點選瀏覽器返回按鈕,進行操作
       console.log(document.referrer);

       //使用href的形式去用跳轉的形式,跳轉到上一頁
       document.location.href = document.referrer;
 }, false);
 var state = {
    title: "",
    url: ""
 };
 window.history.pushState(state, "", "");

方法二:使用 pageshow  (這個是目前測試 此寫法在 iOS WKWebView 有作用,但在 Android WebView 上無作用 )

onpageshow事件(這個事件在頁面顯示時觸發,如果頁面不在“往返快取”中,該事件將會在onload後觸發)
在onpageshow事件中,可以利用event.persisted

//被回上一頁時 強制重新執行該網頁
window.onpageshow = function(event) {
    if (event.persisted){
        window.location.reload();
    }
}

或 

window.addEventListener('pageshow', function(event) {
    if (event.persisted) {
    	location.reload();    //如果檢測到頁面是從“往返快取”中讀取的,重新整理頁面
    }
}

方法三:使用 onunload

指定了 onunload 事件處理程式的頁面會被自動排除在 “往返快取”之外,即使事件
處理程式是空的。原因在於, onunload 最常用於撤銷在 onload 中所執行的操作,
而跳過 onload 後再次顯示頁面很可能就會導致頁面不正常。

window.addEventListener('unload',function () { });

方法四:(這個是目前測試 此寫法在 Android WebView 有作用,但在 iOS WKWebView 上無作用 )

透過 JavaScript 來偵測 request 來源,如果是使用 go back 時就做一些動作(e.x. 重新整理頁面或是提示)

$(function () {
        if (!!window.performance && window.performance.navigation.type === 2) {
            //!! 用來檢查 window.performance 是否存在
            //window.performance.navigation.type ===2 表示使用 back or forward
            console.log('Reloading');
            //window.location.reload();//或是其他動作
        }
    });