zoukankan      html  css  js  c++  java
  • JavaScript监听手机物理返回键的两种解决方法

    JavaScript没有监听物理返回键的API,所以只能使用 popstate 事件监听。

    有两个解决办法:

    1、返回到指定的页面   

    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里必须再声明一次,不然监听返回事件失败。

    xback.js下载

    /**
     * 使用 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');

    调用方法:

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

    总结

    以上所述是小编给大家介绍的JavaScript监听手机物理返回键的两种解决方法,希望对大家有所帮助!

  • 相关阅读:
    如何用js解网页中间内容的高度自适应
    常见Js获取高宽度的方法
    CSS3 转换 transform
    CSS3 过渡 transition
    CSS3 动画 animation
    当页面内容不够的时候,如何让footer一直固定底部显示
    如何用js判断是否为手机访问
    用css解决table文字溢出控制td显示字数
    jquery实现全选和反选功能
    JS中filter的用法
  • 原文地址:https://www.cnblogs.com/shuilangyizu/p/10001615.html
Copyright © 2011-2022 走看看