JavaScript监听手机物理返回键的两种解决方法


JavaScript没有监听物理返回键的API,所以只能使用 popstate 事件监听。接下来通过本文给大家分享JavaScript监听手机物理返回键的两种解决方法,

有两个解决办法:

1、返回到指定的页面    

1
2
3
4
5
6
7
8
9
10
11
pushHistory();
    window.addEventListener( "popstate" , function (e) {
      window.location = 'http://www.baidu.com' ;
    }, false );
    function pushHistory() {
      var state = {
        title: "title" ,
        url: "#"
      };
      window.history.pushState(state, "title" , "#" );
    }

2、js文件方法

此声明函数在xback.js文件里有,在app.js里必须再声明一次,不然监听返回事件失败。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
/**
  * 使用 HTML5 的 History 新 API pushState 来曲线监听 Android 设备的返回按钮
  * XBack.listen(function(){
     alert('oh! you press the back button');
   });
  */
;! 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( 'Events' );
     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' );

调用方法:

1
2
3
XBack.listen( function (){
   alert( 'back' );
});

总结

以上所述是小编给大家介绍的JavaScript监听手机物理返回键的两种解决方法


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM