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


Posted in Javascript onAugust 14, 2017

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

/**
 * 使用 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监听手机物理返回键的两种解决方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
网页图片延时加载的js代码
Apr 22 Javascript
浅析showModalDialog数据缓存问题(用禁止浏览器缓存解决)
Jul 09 Javascript
jQuery删除一个元素后淡出效果展示删除过程的方法
Mar 18 Javascript
JavaScript ES6中CLASS的使用详解
Nov 22 Javascript
学习vue.js中class与style绑定
Dec 03 Javascript
小发现之浅谈location.search与location.hash的问题
Jun 23 Javascript
Node.js利用js-xlsx处理Excel文件的方法详解
Jul 05 Javascript
jQuery实现侧边栏隐藏与显示的方法详解
Dec 22 jQuery
vue 验证码界面实现点击后标灰并设置div按钮不可点击状态
Oct 28 Javascript
js利用拖放实现添加删除
Aug 27 Javascript
threejs太阳光与阴影效果实例代码
Apr 05 Javascript
el-table-column 内容不自动换行的解决方法
Aug 14 Vue.js
jQuery绑定事件方法及区别(bind,click,on,live,one)
Aug 14 #jQuery
js单页hash路由原理与应用实战详解
Aug 14 #Javascript
jQuery选择器特殊字符与属性空格问题
Aug 14 #jQuery
详解升级react-router 4 踩坑指南
Aug 14 #Javascript
javaScript封装的各种写法
Aug 14 #Javascript
vue教程之toast弹框全局调用示例详解
Aug 24 #Javascript
vue2.0项目中使用Ueditor富文本编辑器示例代码
Aug 14 #Javascript
You might like
isset和empty的区别
2007/01/15 PHP
据说是雅虎的一份PHP面试题附答案
2009/01/07 PHP
PHP的一个完美GIF等比缩放类,附带去除缩放黑背景
2014/04/01 PHP
常用PHP数组排序函数归纳
2016/08/08 PHP
Yii2使用表单上传文件的实例代码
2017/08/03 PHP
PHP设计模式(一)工厂模式Factory实例详解【创建型】
2020/05/02 PHP
优化innerHTML操作(提高代码执行效率)
2011/08/20 Javascript
通过复制Table生成word和excel的javascript代码
2014/01/20 Javascript
JavaScript实现N皇后问题算法谜题解答
2014/12/29 Javascript
js实现的捐赠管理完整实例
2015/01/20 Javascript
JS控制表格实现一条光线流动分割行的方法
2015/03/09 Javascript
JavaScript获得表单target属性的方法
2015/04/02 Javascript
jquery ajax分页插件的简单实现
2016/01/27 Javascript
如何提高数据访问速度
2016/12/26 Javascript
bootstrap输入框组件使用方法详解
2017/01/19 Javascript
node.js中debug模块的简单介绍与使用
2017/04/25 Javascript
如何通过非数字与字符的方式实现PHP WebShell详解
2017/07/02 Javascript
React Native中Navigator的使用方法示例
2017/10/13 Javascript
如何获取vue单文件自身源码路径
2019/05/06 Javascript
node.js express捕获全局异常的三种方法实例分析
2019/12/27 Javascript
javascript实现简易计算器功能
2020/09/23 Javascript
[02:08]2014DOTA2国际邀请赛 430专访:力争取得小组前二
2014/07/11 DOTA
Python实现将不规范的英文名字首字母大写
2016/11/15 Python
对python dataframe逻辑取值的方法详解
2019/01/30 Python
在Pycharm中调试Django项目程序的操作方法
2019/07/17 Python
python装饰器练习题及答案
2019/11/01 Python
Python Numpy 自然数填充数组的实现
2019/11/28 Python
分享一个python的aes加密代码
2020/12/22 Python
CSS3制作圆角图片和椭圆形图片
2016/07/08 HTML / CSS
北京RT科技有限公司.net工程师面试题
2013/02/15 面试题
房屋分割离婚协议书范本
2014/12/01 职场文书
2014年大学学生会工作总结
2014/12/02 职场文书
国庆阅兵观后感
2015/06/15 职场文书
昆虫记读书笔记
2015/06/26 职场文书
员工保密协议范本,您一定得收藏!很有用!
2019/08/08 职场文书
零基础学java之循环语句的使用
2022/04/10 Java/Android