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 相关文章推荐
JQuery调webservice实现邮箱验证(检测是否可用)
May 21 Javascript
jquery导航制件jquery鼠标经过变色效果示例
Dec 05 Javascript
JavaScript简单实现鼠标拖动选择功能
Mar 06 Javascript
jQuery实现的图片分组切换焦点图插件
Jan 06 Javascript
jQuery实现数秒后自动提交form的方法
Mar 05 Javascript
JavaScript中数组的合并以及排序实现示例
Oct 24 Javascript
JavaScript实现点击按钮就复制当前网址
Dec 14 Javascript
JavaScript接口的实现三种方式(推荐)
Jun 14 Javascript
Bootstrap框架的学习教程详解(二)
Oct 18 Javascript
原生js实现鼠标跟随效果
Feb 28 Javascript
JQ中$(window).load和$(document).ready区别与执行顺序
Mar 01 Javascript
Node.js使用Koa搭建 基础项目
Jan 08 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/01/31 PHP
js 限制数字 js限制输入实现代码
2012/12/04 Javascript
复制js对象方法(详解)
2013/07/08 Javascript
JS中判断null、undefined与NaN的方法
2014/03/26 Javascript
JQuery实现的购物车功能(可以减少或者添加商品并自动计算价格)
2015/01/13 Javascript
微信小程序 教程之注册程序
2016/10/17 Javascript
js正则表达式最长匹配(贪婪匹配)和最短匹配(懒惰匹配)用法分析
2016/12/27 Javascript
Bootstrap面板使用方法
2017/01/16 Javascript
jquery封装插件时匿名函数形参和实参的写法解释
2017/02/14 Javascript
js事件冒泡与事件捕获详解
2017/02/20 Javascript
微信小程序上滑加载下拉刷新(onscrollLower)分批加载数据(一)
2017/05/11 Javascript
实现一个完整的Node.js RESTful API的示例
2017/09/29 Javascript
基于vue实现分页效果
2017/11/06 Javascript
纯JS实现出生日期[年月日]下拉菜单效果
2018/06/01 Javascript
Layui组件Table绑定行点击事件和获取行数据的方法
2018/08/19 Javascript
新版小程序登录授权的方法
2018/12/12 Javascript
Three.js中矩阵和向量的使用教程
2019/03/19 Javascript
vue使用prop可以渲染但是打印台报错的解决方式
2019/11/13 Javascript
vue子组件改变父组件传递的prop值通过sync实现数据双向绑定(DEMO)
2020/02/01 Javascript
[01:12]快闪回顾DOTA2亚洲邀请赛(DAC) 静候2018新征程开启
2018/03/11 DOTA
[41:11]完美世界DOTA2联赛PWL S2 Inki vs Magma 第一场 11.22
2020/11/24 DOTA
Python中函数的多种格式和使用实例及小技巧
2015/04/13 Python
Python的Tornado框架异步编程入门实例
2015/04/24 Python
python+django+sql学生信息管理后台开发
2018/01/11 Python
Win10环境python3.7安装dlib模块趟过的坑
2019/08/01 Python
python3.7+selenium模拟淘宝登录功能的实现
2020/05/26 Python
如何基于Python按行合并两个txt
2020/11/03 Python
解决python3.x安装numpy成功但import出错的问题
2020/11/17 Python
HTML5+CSS3模仿优酷视频截图功能示例
2017/01/05 HTML / CSS
AT&T Wireless:手机、无限数据计划和配件
2018/06/03 全球购物
linux下进程间通信的方式
2013/01/23 面试题
浅谈Python列表嵌套字典转化的问题
2021/04/07 Python
vue实现简单数据双向绑定
2021/04/28 Vue.js
解决Python字典查找报Keyerror的问题
2021/05/26 Python
SQL SERVER实现连接与合并查询
2022/02/24 SQL Server
让JavaScript代码更加精简的方法技巧
2022/06/01 Javascript