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 相关文章推荐
js面向对象设计用{}好还是function(){}好(构造函数)
Oct 23 Javascript
验证码按回车不变解决方法
Mar 29 Javascript
封装了一个支持匿名函数的Javascript事件监听器
Jun 05 Javascript
用模版生成HTML的的框架jquery.tmpl使用详解
Jan 07 Javascript
表单验证正则表达式实例代码详解
Nov 09 Javascript
js时间戳转为日期格式的方法
Dec 28 Javascript
基于jquery实现三级下拉菜单
May 10 Javascript
vue2 如何实现div contenteditable=“true”(类似于v-model)的效果
Feb 08 Javascript
vue-cli之router基本使用方法详解
Oct 17 Javascript
微信小程序tab切换可滑动切换导航栏跟随滚动实现代码
Sep 04 Javascript
ElementUI Tree 树形控件的使用并给节点添加图标
Feb 27 Javascript
国庆节到了,利用JS实现一个生成国庆风头像的小工具 详解实现过程
Oct 05 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小教程之实现双向链表
2014/06/12 PHP
PHP实现股票趋势图和柱形图
2015/02/07 PHP
Javascript Object.extend
2010/05/18 Javascript
js+css实现增加表单可用性之提示文字
2013/06/03 Javascript
jquery中focus()函数实现当对象获得焦点后自动把光标移到内容最后
2013/09/29 Javascript
javascript常用的正则表达式实例
2014/05/15 Javascript
js的延迟执行问题分析
2014/06/23 Javascript
node.js适合游戏后台开发吗?
2014/09/03 Javascript
Javascript访问器属性实例分析
2014/12/30 Javascript
jQuery Easyui学习之datagrid 动态添加、移除editor
2016/01/27 Javascript
使用ajaxfileupload.js实现上传文件功能
2016/08/13 Javascript
无法获取隐藏元素宽度和高度的解决方案
2017/03/07 Javascript
AngularJS中使用three.js的实例详解
2017/07/21 Javascript
jQury Ajax使用Token验证身份实例代码
2017/09/22 Javascript
vue中element 上传功能的实现思路
2018/07/06 Javascript
vue-swiper的使用教程
2018/08/30 Javascript
如何使用50行javaScript代码实现简单版的call,apply,bind
2019/08/14 Javascript
ES6中的Javascript解构的实现
2020/10/30 Javascript
全面解析Python的While循环语句的使用方法
2015/10/13 Python
Python中生成器和迭代器的区别详解
2018/02/10 Python
PIL对上传到Django的图片进行处理并保存的实例
2019/08/07 Python
python  logging日志打印过程解析
2019/10/22 Python
解决pyinstaller 打包exe文件太大,用pipenv 缩小exe的问题
2020/07/13 Python
html5 offlline 缓存使用示例
2013/06/24 HTML / CSS
采用专利算法搜索最廉价的机票:CheapAir
2016/09/10 全球购物
美国时尚女装在线:Missguided
2016/12/03 全球购物
水务局局长岗位职责
2013/11/28 职场文书
志愿者活动总结范文
2014/04/26 职场文书
学生党员一帮一活动总结
2014/07/08 职场文书
园艺专业毕业生求职信
2014/09/02 职场文书
纪念九一八事变演讲稿1000字
2014/09/14 职场文书
村党支部书记个人对照材料汇报
2014/10/26 职场文书
社区工作者个人总结
2015/02/28 职场文书
创业计划书之餐饮馄饨店
2019/07/18 职场文书
导游词之吉林花园山
2019/10/17 职场文书
如何使用Tkinter进行窗口的管理与设置
2021/06/30 Python