js制御androidオリジナル戻りボタン
1171 ワード
jsは物理的な戻りキーを直接傍受することはできませんが、HTML 5のHistoryの新しいAPI pushStateでAndroidデバイスの戻りボタンを曲線的に傍受することができます.
原理:
ページのロード後に履歴に1つのstateを書き込み、popstateイベントを傍受し、戻るボタンが押下するとpopstateがトリガーされ、トリガーされたstateと書き込みが一致すると、戻るボタンが押下されたとみなす.
Example:
ページはxbackを導入する.js後、次の方法で戻るボタンイベントをリスニングし、マルチメソッドバインドをサポートします.
原理:
ページのロード後に履歴に1つの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');