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监听手机物理返回键的两种解决方法

  • 相关阅读:
    Selenium2+python自动化55-unittest之装饰器(@classmethod)【转载】
    Selenium2+python自动化54-unittest生成测试报告(HTMLTestRunner)【转载】
    验证码在登录页面的使用
    习课省市区的三级联动(cxselect的使用)
    jira的使用
    springmvc 用拦截器+token防止重复提交
    springMVC发送邮件
    Commons-Collections 集合工具类的使用
    习课的视频播放器 video.js
    习课的redis配置记录
  • 原文地址:https://www.cnblogs.com/xzzzys/p/8422904.html
Copyright © 2011-2022 走看看