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 相关文章推荐
javascript 星级评分效果(手写)
Dec 24 Javascript
js添加select下默认的option的value和text的方法
Oct 19 Javascript
jQuery中appendTo()方法用法实例
Jan 08 Javascript
JavaScript箭头(arrow)函数详解
Jun 04 Javascript
ES6学习之变量的两种命名方法示例
Jul 18 Javascript
浅谈Angular4实现热加载开发旅程
Sep 08 Javascript
基于JavaScript实现报警器提示音效果
Oct 27 Javascript
关于 angularJS的一些用法
Nov 29 Javascript
vue+webpack实现异步组件加载的方法
Feb 03 Javascript
ant design vue 表格table 默认勾选几项的操作
Oct 31 Javascript
用vue设计一个日历表
Dec 03 Vue.js
Vue详细的入门笔记
May 10 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
从零开始学YII2框架(六)高级应用程序模板
2014/08/20 PHP
PHP遍历目录函数opendir()、readdir()、closedir()、rewinddir()总结
2014/11/18 PHP
新浪微博OAuth认证和储存的主要过程详解
2015/03/27 PHP
PHP判断手机是IOS还是Android
2015/12/09 PHP
一个简单的php MVC留言本实例代码(必看篇)
2016/09/22 PHP
PHP获取HTTP body内容的方法
2018/12/31 PHP
浅谈PHP封装CURL
2019/03/06 PHP
PHP实现关键字搜索后描红功能示例
2019/07/03 PHP
asp 的 分词实现代码
2007/05/24 Javascript
JS在IE和FF下attachEvent,addEventListener学习笔记
2009/11/26 Javascript
jquery删除提示框弹出是否删除对话框
2014/01/07 Javascript
多个jQuery版本共存的处理方案
2015/03/17 Javascript
使用AOP改善javascript代码
2015/05/01 Javascript
JavaScript函数的一些注意要点小结及js匿名函数
2015/11/10 Javascript
js确认框confirm()用法实例详解
2016/01/07 Javascript
Angular2学习笔记——详解NgModule模块
2016/12/02 Javascript
Node.js中流(stream)的使用方法示例
2017/07/16 Javascript
详解Webpack+Babel+React开发环境的搭建的方法步骤
2018/01/09 Javascript
JavaScript设计模式之装饰者模式实例详解
2019/01/17 Javascript
ReactRouter的实现方法
2021/01/25 Javascript
利用一个简单的例子窥探CPython内核的运行机制
2015/03/30 Python
Python进阶篇之字典操作总结
2016/11/16 Python
python 创建弹出式菜单的实现代码
2017/07/11 Python
python快排算法详解
2019/03/04 Python
Pandas读写CSV文件的方法示例
2019/03/27 Python
Django 解决distinct无法去除重复数据的问题
2020/05/20 Python
序列化Python对象的方法
2020/08/01 Python
使用html5新特性轻松监听任何App自带返回键的示例
2018/03/13 HTML / CSS
Mio Skincare英国官网:身体紧致及孕期身体护理
2018/08/19 全球购物
美国轮胎网站:Priority Tire
2018/11/28 全球购物
德国净水壶和滤芯品牌:波尔德PearlCo(家用净水器)
2020/04/29 全球购物
学生学习总结的自我评价
2013/10/22 职场文书
实习证明格式范文
2014/10/14 职场文书
工厂清洁工岗位职责
2015/02/14 职场文书
党校个人总结
2015/03/04 职场文书
2016大学生国家助学贷款承诺书
2016/03/25 职场文书