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();//或是其他動作
}
});