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 创建书签小工具之理论
Feb 25 Javascript
JavaScript打印iframe内容示例代码
Aug 20 Javascript
javascript的回调函数应用示例
Feb 20 Javascript
JavaScript中反正弦函数Math.asin()的使用简介
Jun 14 Javascript
jstree创建无限分级树的方法【基于ajax动态创建子节点】
Oct 25 Javascript
有趣的bootstrap走动进度条
Dec 01 Javascript
基于HTML5+JS实现本地图片裁剪并上传功能
Mar 24 Javascript
一步步教你利用webpack如何搭一个vue脚手架(超详细讲解和注释)
Jan 08 Javascript
微信小程序开发实现的IP地址查询功能示例
Mar 28 Javascript
Layui数据表格判断编辑输入的值,是否为我需要的类型详解
Oct 26 Javascript
vue-cli3.X快速创建项目的方法步骤
Nov 14 Javascript
用vue设计一个日历表
Dec 03 Vue.js
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选择排序法实现数组排序实例分析
2015/02/16 PHP
Zend Framework分页类用法详解
2016/03/22 PHP
Yii2实现多域名跨域同步登录退出
2017/02/04 PHP
yii2学习教程之5种内置行为类详解
2017/08/03 PHP
php+js实现点赞功能的示例详解
2020/08/07 PHP
jquery 图片预加载 自动等比例缩放插件
2008/12/25 Javascript
javascript 获取select下拉列表值的代码
2009/09/07 Javascript
javascript 模拟JQuery的Ready方法实现并出现的问题
2009/12/06 Javascript
改变javascript函数内部this指针指向的三种方法
2010/04/23 Javascript
jQeury淡入淡出需要注意的问题
2010/09/08 Javascript
浅析Node在构建超媒体API中的作用
2014/07/30 Javascript
jQuery实现网页顶部固定导航效果代码
2015/12/24 Javascript
AngularJS实现树形结构(ztree)菜单示例代码
2016/09/18 Javascript
Ajax+FormData+javascript实现无刷新表单信息提交
2016/10/24 Javascript
浅谈angular4 ng-content 中隐藏的内容
2017/08/18 Javascript
vuex + keep-alive实现tab标签页面缓存功能
2019/10/17 Javascript
JavaScript实现点击切换验证码及校验
2021/01/10 Javascript
[02:19]DOTA2女子战队FOX视频专访:希望更多美眉一起加入
2013/10/15 DOTA
Python判断某个用户对某个文件的权限
2016/10/13 Python
Python初学者需要注意的事项小结(python2与python3)
2018/09/26 Python
pycharm使用matplotlib.pyplot不显示图形的解决方法
2018/10/28 Python
CentOS下Python3的安装及创建虚拟环境的方法
2018/11/28 Python
python利用ffmpeg进行录制屏幕的方法
2019/01/10 Python
python中aioysql(异步操作MySQL)的方法
2019/04/11 Python
Missguided美国官网:英国时尚品牌
2018/01/18 全球购物
Grow Gorgeous美国官网:只要八天,体验唤醒毛囊后新生的茂密秀发
2018/06/04 全球购物
分布式数据库需要考虑哪些问题
2013/12/08 面试题
幼儿园毕业家长感言
2014/02/10 职场文书
2014年基层党组织公开承诺书
2014/03/29 职场文书
小学三好学生事迹材料
2014/08/15 职场文书
2014年扶贫工作总结
2014/11/18 职场文书
班主任经验交流材料
2014/12/16 职场文书
2015世界地球日活动总结
2015/02/09 职场文书
关于环保的广播稿
2015/12/17 职场文书
Python实现列表拼接和去重的三种方式
2021/07/02 Python
浅析CSS在DevTools 中架构演变
2021/10/05 HTML / CSS