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 相关文章推荐
jQuery 源码分析笔记(7) Queue
Jun 19 Javascript
javascript实现网页背景烟花效果的方法
Aug 06 Javascript
详解AngularJS控制器的使用
Mar 09 Javascript
JS实现消息来时让网页标题闪动效果的方法
Apr 20 Javascript
jQuery 选择符详细介绍及整理
Dec 02 Javascript
vue-cli如何添加less 以及sass
Jul 06 Javascript
select自定义小三角样式代码(实用总结)
Aug 18 Javascript
深入理解 webpack 文件打包机制(小结)
Jan 08 Javascript
Vue实现导出excel表格功能
Mar 30 Javascript
Koa 使用小技巧(小结)
Oct 22 Javascript
layui 根据后台数据动态创建下拉框并同时默认选中的实例
Sep 02 Javascript
Servlet返回的数据js解析2种方法
Dec 12 Javascript
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
PHP 内存缓存加速功能memcached安装与用法
2009/09/03 PHP
php和jquery实现地图区域数据统计展示数据示例
2014/02/12 PHP
PHP反射使用实例和PHP反射API的中文说明
2014/07/02 PHP
详解WordPress开发中get_header()获取头部函数的用法
2016/01/08 PHP
PHP使用pdo实现事务处理操作示例
2018/09/05 PHP
PHP getDocNamespaces()函数讲解
2019/02/03 PHP
PHP实现简单日历类编写
2020/08/28 PHP
学习ExtJS TextField常用方法
2009/10/07 Javascript
javascript管中窥豹 形参与实参浅析
2011/12/17 Javascript
jquery 插件开发 extjs中的extend用法小结
2013/01/04 Javascript
Javascript Object 对象学习笔记
2014/12/17 Javascript
jQuery实现手机号码输入提示功能实例
2015/04/30 Javascript
JS实现表单中checkbox对勾选中增加边框显示效果
2015/08/21 Javascript
前端js实现文件的断点续传 后端PHP文件接收
2016/10/14 Javascript
jquery 判断div show的状态实例
2016/12/03 Javascript
vue router嵌套路由在history模式下刷新无法渲染页面问题的解决方法
2018/01/25 Javascript
红黑树的插入详解及Javascript实现方法示例
2018/03/26 Javascript
关于layui的动态图标不显示的解决方法
2019/09/04 Javascript
vue prop传值类型检验方式
2020/07/30 Javascript
Python中return语句用法实例分析
2015/08/04 Python
Python根据欧拉角求旋转矩阵的实例
2019/01/28 Python
Python学习笔记之Break和Continue用法分析
2019/08/14 Python
树莓派3 搭建 django 服务器的实例
2019/08/29 Python
python 动态调用函数实例解析
2019/10/21 Python
Python Django中间件,中间件函数,全局异常处理操作示例
2019/11/08 Python
CSS3的颜色渐变效果的示例代码
2017/09/29 HTML / CSS
Street One瑞士:德国现代时装公司
2019/10/09 全球购物
100%羊绒:NakedCashmere
2020/08/26 全球购物
乌克兰设计师和品牌的服装:Love&Live
2020/04/14 全球购物
结构和类有什么异同
2012/07/16 面试题
业务主管岗位职责
2013/11/20 职场文书
老师的检讨书
2014/02/23 职场文书
2014大学生批评与自我批评思想汇报
2014/09/21 职场文书
2014年教研组工作总结
2014/11/26 职场文书
Python编解码问题及文本文件处理方法详解
2021/06/20 Python
GoFrame框架数据校验之校验结果Error接口对象
2022/06/21 Golang