1. 程式人生 > >js控制android原生返回按鈕

js控制android原生返回按鈕

js是無法直接監聽物理返回鍵的,但是我們可以用HTML5的 History 新 API pushState 來曲線監聽 Android 裝置的返回按鈕

原理:

在頁面載入後往歷史記錄寫入一個 state, 並監聽 popstate 事件, 如果返回按鈕被按下, 則會觸發 popstate, 比對到觸發的 state 跟寫入的一致, 則認為返回按鈕被按下了. Example: 頁面引入xback.js後, 使用下面的方法監聽返回按鈕事件, 支援多方法繫結
XBack.listen(function(){
	alert('oh! you press the back button');
});
xback.js
/*使用HTML5的history新API pushState來曲線監聽Android裝置的返回按鈕
/*增加個分號,防止壓縮時出錯
;!function(pkg,undefined){
var STATE =  'x-back';
var element;
var onPopState = function(event){
event.state === STATE && fire();
}
var record = function(state){
history.pushState(state,null,location.href);
}
var fire = function(){
var event = document.createEvent('Evenets');
event.initEvent(STATE,false,false);
element.dispatchEvent(event);
}
var listen = function(listener){
element.addEventListener(STATE,listener,false);
}
;!function(){
element = document.createElement('span');
window.addEventListener('popstate',onPopState);
this.listen = listen;
record(STATE);
}.call(window[pkg] = window[pkg] || {});

}.('XBack');