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 相关文章推荐
15 个 JavaScript Web UI 库
May 19 Javascript
浅谈Javascript嵌套函数及闭包
Nov 09 Javascript
jquery异步跨域访问代码
Jun 28 Javascript
Jquery插件编写简明教程
Mar 25 Javascript
自制的文件上传JS控件可支持IE、chrome、firefox etc
Apr 18 Javascript
离开当前页面前使用js判断条件提示是否要离开页面
May 02 Javascript
轻松5句话解决JavaScript的作用域
Jul 15 Javascript
轻松实现jquery选项卡切换效果
Oct 10 Javascript
js 索引下标之li集合绑定点击事件
Jan 12 Javascript
快速解决处理后台返回json数据格式的问题
Aug 07 Javascript
Vue函数式组件的应用实例详解
Aug 30 Javascript
vue项目中使用eslint+prettier规范与检查代码的方法
Jan 16 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消息队列实现及应用详解【队列处理订单系统和配送系统】
2019/05/20 PHP
判断是否输入完毕再激活提交按钮
2006/06/26 Javascript
js滚动条多种样式,推荐
2007/02/05 Javascript
面向对象的Javascript之三(封装和信息隐藏)
2012/01/27 Javascript
基于javascipt-dom编程 table对象的使用
2013/04/22 Javascript
为什么要在引入的css或者js文件后面加参数的详细讲解
2013/05/03 Javascript
JavaScript实现删除,移动和复制文件的方法
2015/08/05 Javascript
很不错的两款Bootstrap Icon图标选择组件
2016/01/28 Javascript
javascript设计模式之module(模块)模式
2016/08/19 Javascript
工厂模式在JS中的实践
2017/01/18 Javascript
利用jQuery实现滑动开关按钮效果(附demo源码下载)
2017/02/07 Javascript
在vue中封装可复用的组件方法
2018/03/01 Javascript
如何提升vue.js中大型数据的性能
2019/06/21 Javascript
layui实现三级联动效果
2019/07/26 Javascript
JavaScript事件冒泡机制原理实例解析
2020/01/14 Javascript
python 实现删除文件或文件夹实例详解
2016/12/04 Python
Python cookbook(数据结构与算法)从序列中移除重复项且保持元素间顺序不变的方法
2018/03/13 Python
Django后端接收嵌套Json数据及解析详解
2019/07/17 Python
Django的用户模块与权限系统的示例代码
2019/07/24 Python
Python实现数值积分方式
2019/11/20 Python
python 求定积分和不定积分示例
2019/11/20 Python
opencv-python 提取sift特征并匹配的实例
2019/12/09 Python
python文件编写好后如何实践
2020/07/07 Python
世界上最大的隐形眼镜商店:1-800 Contacts
2018/11/03 全球购物
授权委托书范本
2014/04/03 职场文书
秋天的怀念教学反思
2014/04/28 职场文书
党的群众路线教育实践活动心得体会范文
2014/11/05 职场文书
商铺租房协议书范本
2014/12/04 职场文书
河童之夏观后感
2015/06/11 职场文书
高三教师工作总结2015
2015/07/21 职场文书
小学总务工作总结
2015/08/13 职场文书
2016年大学迎新晚会工作总结
2015/10/15 职场文书
党风廉政建设心得体会(2016最新版)
2016/01/22 职场文书
如何做好工作总结!
2019/04/10 职场文书
Python编程编写完善的命令行工具
2021/09/15 Python
css清除浮动clearfix:after的用法详解(附完整代码)
2023/05/21 HTML / CSS