移動端中pagehide、pageshow的應用

　　閒話少敘，來進入場景：訂單提交頁面，各類積分禮品卡規則都算好了，用戶提交表單開始支付，支付完成進入成功提示頁面，這是絕大部分網站的付款體驗吧，那麼問題來了，web移動端中進入成功提示頁後，用戶點擊瀏覽器自帶的回退按鈕會發生什麼那？

　　

 　　結果會回到剛剛的訂單提交頁面（否則那），這就不合理了，這個訂單已經被提交了，已經成歷史了，怎麼能回到提交頁面那？只能在歷史記錄裏查詢，這裏要求的結果就是提交成功後，用戶點擊瀏覽器回退按鈕不會進入到上一個用戶訂單提交頁面，要求不動或者跳到其餘提示頁面；在pc端，瀏覽多個頁面，點擊瀏覽器回退前進按鈕，頁面都會刷新，可是在移動瀏覽器上，瀏覽多個頁面，其餘非瀏覽狀態頁面會被瀏覽器緩存起來，包括DOM和JS，前進和回退的時候，不會產生新的交互，也就是頁面不會刷新，想在頁面監聽load的同窗可歇歇了，這個問題着實困擾了我一陣子，網上也有相似的插件，監聽瀏覽器行爲的，可是有兼容問題，也想過利用history對象的更改來控制頁面，效果也不理想，最終的解決方式是經過監聽頁面pagehide和pageshow事件來作其餘的操做，使得用戶要回退到已失效的訂單提交頁面會發生跳轉到其餘提示頁面，code看起來很簡單：

監控全部頁面的觸發事件：

$("document").on("pagehide",function(event){...})

監聽制定頁面：

$("document").on("pagehide","page",function(event,data){...})

這裏的page可選。指的是指定 pagehide 事件觸發時指向的頁面id。 內部頁面, 請使用 #id。外部頁面，使用exp.html形式

　　本例中就能夠這麼寫：

$(document).on("pageshow",function(){
  //some code in here...
});

　　捕獲到本頁面pageshow事件後，檢查此表單是否被提交過，而後作相應的操做。這樣就解決移動web中頁面前進回退沒法從新run js的問題了。

 

　　原文地址：移動端中pagehide、pageshow的應用，薛陳磊 | Share the world