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 相关文章推荐
5个javascript的数字格式化函数分享
Dec 07 Javascript
js split 的用法和定义 js split分割字符串成数组的实例代码
May 13 Javascript
qq悬浮代码(兼容各个浏览器)
Jan 29 Javascript
在JS数组特定索引处指定位置插入元素
Jul 27 Javascript
浅谈javascript 迭代方法
Jan 21 Javascript
JS实现兼容各浏览器解析XML文档数据的方法
Jun 01 Javascript
Javascript实现跑马灯效果的简单实例
May 31 Javascript
功能强大的Bootstrap效果展示(二)
Aug 03 Javascript
JS常用加密编码与算法实例总结
Dec 22 Javascript
vue组件命名和props命名代码详解
Sep 01 Javascript
layer.prompt使文本框为空的情况下也能点击确定的方法
Sep 24 Javascript
Vue中nprogress页面加载进度条的方法实现
Nov 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安装攻略:常见问题解答(三)
2006/10/09 PHP
php Undefined index和Undefined variable的解决方法
2008/03/27 PHP
PHP递归算法的详细示例分析
2013/02/19 PHP
php定时计划任务与fsockopen持续进程实例
2014/05/23 PHP
解读PHP中上传文件的处理问题
2016/05/29 PHP
PHP两种实现无级递归分类的方法
2017/03/02 PHP
PHP+AjaxForm异步带进度条上传文件实例代码
2017/08/14 PHP
打造基于jQuery的高性能TreeView(asp.net)
2011/02/23 Javascript
JQuery中html()方法使用不当带来的陷阱
2011/04/07 Javascript
分享8款优秀的 jQuery 加载动画和进度条插件
2012/10/24 Javascript
JS对img进行操作(换图片/切图/轮换/停止)
2013/04/17 Javascript
javascript实现节点(div)名称编辑
2014/12/17 Javascript
JavaScript实现对下拉列表值进行排序的方法
2015/07/15 Javascript
jquery获取select选中值的方法分析
2015/12/22 Javascript
jQuery实现图片轮播效果代码(基于jquery.pack.js插件)
2016/06/02 Javascript
关于Jquery中的事件绑定总结
2016/10/26 Javascript
JS判断输入的字符串是否是数字的方法(正则表达式)
2016/11/29 Javascript
JS实现简单的二元方程计算器功能示例
2017/01/03 Javascript
浅析JS中的 map, filter, some, every, forEach, for in, for of 用法总结
2017/03/29 Javascript
微信小程序--onShareAppMessage分享参数用处(页面分享)
2017/04/18 Javascript
vue实现在线翻译功能
2019/09/27 Javascript
微信小程序静默登录的实现代码
2020/01/08 Javascript
javascript实现留言板功能
2020/02/08 Javascript
利用Python实现命令行版的火车票查看器
2016/08/05 Python
python实现爬取图书封面
2018/07/05 Python
pytorch 实现张量tensor,图片,CPU,GPU,数组等的转换
2020/01/13 Python
基于Python和PyYAML读取yaml配置文件数据
2020/01/13 Python
PyTorch中Tensor的数据统计示例
2020/02/17 Python
python GUI库图形界面开发之PyQt5单选按钮控件QRadioButton详细使用方法与实例
2020/02/28 Python
使用python爬取抖音app视频的实例代码
2020/12/01 Python
莫斯科购买书籍网站:Book24
2020/01/12 全球购物
AURALog面试题软件测试方面
2013/10/22 面试题
医学专业五年以上个人求职信
2013/12/03 职场文书
2014年国庆节广播稿
2014/09/19 职场文书
2015年高中生国庆节演讲稿
2015/07/30 职场文书
怎样做好公众演讲能力?
2019/08/28 职场文书