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 相关文章推荐
2007/12/23更新创意无限,简单实用(javascript log)
Dec 24 Javascript
一个很酷的拖动层的js类,兼容IE及Firefox
Jun 23 Javascript
javascript对talbe进行动态添加、删除、验证实现代码
Mar 29 Javascript
js弹出层永远居中实现思路及代码
Nov 29 Javascript
jquery中$.post()方法的简单实例
Feb 04 Javascript
jQuery获取标签文本内容和html内容的方法
Mar 27 Javascript
JavaScript正则表达式之multiline属性的应用
Jun 16 Javascript
javascirpt实现2个iframe之间传值的方法
Jun 30 Javascript
常用Javascript函数与原型功能收藏(必看篇)
Oct 09 Javascript
JS实现移动端实时监听输入框变化的实例代码
Apr 12 Javascript
AngularJS常见过滤器用法实例总结
Jul 06 Javascript
深入理解JavaScript和TypeScript中的class
Apr 22 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+Tidy-完美的XHTML纠错+过滤
2007/04/10 PHP
php快速url重写更新版[需php 5.30以上]
2010/04/25 PHP
php实现上传图片文件代码
2015/07/19 PHP
PHP程序中的文件锁、互斥锁、读写锁使用技巧解析
2016/03/21 PHP
一段实现页面上的图片延时加载的js代码
2010/02/11 Javascript
JavaScript flash复制库类 Zero Clipboard
2011/01/17 Javascript
asm.js使用示例代码
2013/11/28 Javascript
JavaScript和CSS交互的方法汇总
2014/12/02 Javascript
jQuery实现的输入框选择时间插件用法实例
2015/02/28 Javascript
基于Angularjs实现分页功能
2016/05/30 Javascript
JQuery 设置checkbox值二次无效的解决方法
2016/07/22 Javascript
Vue实现动态显示textarea剩余字数
2017/05/22 Javascript
node内置调试方法总结
2018/02/22 Javascript
Koa2微信公众号开发之消息管理
2018/05/16 Javascript
vue-cli 3.x 配置Axios(proxyTable)跨域代理方法
2018/09/19 Javascript
Vuex新手的理解与使用详解
2019/05/31 Javascript
小程序怎样让wx.navigateBack更好用的方法实现
2019/11/01 Javascript
Vue中el-form标签中的自定义el-select下拉框标签功能
2020/04/20 Javascript
17个Python小技巧分享
2015/01/23 Python
python随机生成指定长度密码的方法
2015/04/04 Python
python避免死锁方法实例分析
2015/06/04 Python
Python写入数据到MP3文件中的方法
2015/07/10 Python
python编写简单爬虫资料汇总
2016/03/22 Python
Python 字符串操作(string替换、删除、截取、复制、连接、比较、查找、包含、大小写转换、分割等)
2018/03/19 Python
python3 实现一行输入,空格隔开的示例
2018/11/14 Python
对Django外键关系的描述
2019/07/26 Python
Python sorted对list和dict排序
2020/06/09 Python
如何强制垃圾回收
2015/10/06 面试题
问卷调查计划书
2014/01/10 职场文书
教师党的群众路线学习心得体会
2014/11/04 职场文书
银行求职信模板
2015/03/20 职场文书
2015年底工作总结范文
2015/05/15 职场文书
少先队入队仪式主持词
2015/07/04 职场文书
幼儿园毕业典礼家长致辞
2015/07/29 职场文书
i5-10400f处理相当于i7多少水平
2022/04/19 数码科技
Linux下搭建SFTP服务器的命令详解
2022/06/25 Servers