從網頁監聽Android裝置的返回鍵

標籤：

最近搞Android項目的時候，遇到一個比較蛋疼的需求，需要從Client App調用系統瀏覽器開啟一個頁面，進行雜七雜八的一些互動之後，返回到App。如何開啟瀏覽器和如何返回App這裡就不說了，有興趣的童鞋可私下交流。

之所以說這個需求蛋疼，是因為Android有個物理返回鍵啊……返回鍵啊……鍵啊……啊……

使用者按下返回鍵後，預期應該跟點擊頁面上的返回鍵一樣——返回App。然而這個返回鍵的被按下的時候網頁完全不知道啊（onbeforeunload不算），找不到直接的辦法去監聽，愁死我們這全苦逼程式員鳥～

雖然啊不能直接監聽，曲線救國的辦法，還是有滴。

經過艱苦卓絕的尋找，發現使用HTML5的History可以稍微類比到返回鍵的按下事件。原理如下：

1. 頁面載入完成時，調用history.pushState寫入一個指定狀態STATE，並監聽window.onpopstate；
2. 當onpopstate被觸發時，檢查event.state是否等於STATE，如果相等，表示頁面發生了後退（按下返回鍵或者瀏覽器的後退按鈕），則把這次行為當作是返回鍵被按下了（把點擊瀏覽器的後退按鈕也誤算進來了，不過沒啥好法子了呀）。

嗯，為了方便調用，把這個邏輯稍微封裝了下，代碼見這裡（https://github.com/iazrael/xback），使用方法如下：

XBack.listen(function(){    alert(‘oh! you press the back button‘);});XBack.listen(function(){    alert(‘ah, press press press‘);});

不過這個方法有些缺陷：

1. 如果項目本身使用了pushState，則記錄會有瑕疵（多了一個曆史）；
2. 瀏覽器的後退按鈕點擊以及調用history.back()也會被當成按下了返回鍵。

But anyway，對於結構和邏輯比較簡單的跳轉頁來說（就是為了返回App用的），這個方法還是蠻實用的，對不對？嘻嘻～

從網頁監聽Android裝置的返回鍵