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 相关文章推荐
在JavaScript中通过URL传递汉字的方法
Apr 09 Javascript
JS实现图片预加载无需等待
Dec 21 Javascript
jquery中选择块并改变属性值的方法
Jul 31 Javascript
JavaScript中定义函数的三种方法
Mar 12 Javascript
Jquery1.9.1源码分析系列(六)延时对象应用之jQuery.ready
Nov 24 Javascript
异步加载JS、CSS代码(推荐)
Jun 15 Javascript
实例详解display:none与visible:hidden的区别
Mar 30 Javascript
AngularJS $http模块POST请求实现
Apr 08 Javascript
通过js控制时间,一秒一秒自己动的实例
Oct 25 Javascript
原生JS控制多个滚动条同步跟随滚动效果
Dec 22 Javascript
关于vue-router的那些事儿
May 23 Javascript
js 实现watch监听数据变化的代码
Oct 13 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 get_headers 判断URL是否有效的解决办法
2013/04/27 PHP
php增删改查示例自己写的demo
2013/09/04 PHP
php版微信自动登录并获取昵称的方法
2016/09/23 PHP
Redis构建分布式锁
2017/03/28 PHP
js小技巧--自动隐藏红叉叉
2007/08/13 Javascript
javascript中"/"运算符常见错误
2010/10/13 Javascript
js禁止document element对象选中文本实现代码
2013/03/21 Javascript
jquery实现带复选框的表格行选中删除时高亮显示
2013/08/01 Javascript
jquery 按钮状态效果 正常、移上、按下
2013/08/12 Javascript
js window.print实现打印特定控件或内容
2013/09/16 Javascript
JavaScript学习笔记之Cookie对象
2015/01/22 Javascript
Jquery实现纵向横向菜单
2016/01/24 Javascript
动态JavaScript所造成一些你不知道的危害
2016/09/25 Javascript
详解vue模拟加载更多功能(数据追加)
2017/06/23 Javascript
js+html实现周岁年龄计算器
2019/06/25 Javascript
vue服务端渲染操作简单入门实例分析
2019/08/28 Javascript
vue计算属性无法监听到数组内部变化的解决方案
2019/11/06 Javascript
python多重继承新算法C3介绍
2014/09/28 Python
Python3指定路径寻找符合匹配模式文件
2015/05/22 Python
python如何在终端里面显示一张图片
2016/08/17 Python
python实现微信小程序自动回复
2018/09/10 Python
pandas dataframe添加表格框线输出的方法
2019/02/08 Python
用Python配平化学方程式的方法
2019/07/20 Python
python3.6、opencv安装环境搭建过程(图文教程)
2019/11/05 Python
CSS3 @keyframes简单动画实现
2018/02/24 HTML / CSS
孤独星球出版物:Lonely Planet Publications
2018/03/17 全球购物
Waterford英国官方网站:世界上最受欢迎的优质水晶品牌
2019/08/17 全球购物
外国语学院毕业生自荐信
2013/10/28 职场文书
师范应届生求职信
2013/11/15 职场文书
工商管理毕业生推荐信
2013/12/24 职场文书
村班子对照检查材料
2014/08/18 职场文书
自荐信怎么写
2015/03/04 职场文书
2016年清明节红领巾广播稿
2015/12/17 职场文书
青年人初次创业的“五不要”
2019/08/23 职场文书
解决Golang time.Parse和time.Format的时区问题
2021/04/29 Golang
pytorch损失反向传播后梯度为none的问题
2021/05/12 Python