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