zoukankan      html  css  js  c++  java
  • 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监听手机物理返回键的两种解决方法

  • 相关阅读:
    poj_2417 (baby_step,giant_step算法)
    多校第4场1012
    欧拉回路小结:hihocoder49,50,51
    xor问题的小结(HDU_5269 && HDU_5270 && NEU_1600)
    2015年大连邀请赛F题
    字符串处理——Tire树__LA3942
    15陕西省赛——数学题——n维空间切d刀共能分成多少份???
    ACM荣耀之路;
    选课时间!
    二叉树模板!
  • 原文地址:https://www.cnblogs.com/xzzzys/p/8422904.html
Copyright © 2011-2022 走看看