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 学习笔记 选择器之五
Jul 23 Javascript
禁止JQuery中的load方法装载IE缓存中文件的方法
Sep 11 Javascript
javascript:window.open弹出窗口的位置问题
Mar 18 Javascript
基于javascript实现文字无缝滚动效果
Mar 22 Javascript
推荐三款日期选择插件(My97DatePicker、jquery.datepicker、Mobiscroll)
Apr 21 jQuery
JQuery 封装 Ajax 常用方法(推荐)
May 21 jQuery
一步步教你利用Canvas对图片进行处理
Sep 19 Javascript
使用原生js封装的ajax实例(兼容jsonp)
Oct 12 Javascript
vue 系列——vue2-webpack2框架搭建踩坑之路
Dec 22 Javascript
JS实现HTML页面中动态显示当前时间完整示例
Jul 30 Javascript
详解element-ui表格中勾选checkbox,高亮当前行
Sep 02 Javascript
js函数和this用法实例分析
Mar 13 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有道翻译api调用方法实例
2014/12/22 PHP
PHP查找数值数组中不重复最大和最小的10个数的方法
2015/04/20 PHP
PHP分页初探 一个最简单的PHP分页代码的简单实现
2016/06/21 PHP
php的socket编程详解
2016/11/20 PHP
TP5框架请求响应参数实例分析
2019/10/17 PHP
JS Timing
2007/04/21 Javascript
JQuery获取或设置ckeditor的数据(示例代码)
2013/11/15 Javascript
AngularJS ng-style中使用filter
2016/09/21 Javascript
js使用Replace结合正则替换重复出现的字符串功能示例
2016/12/27 Javascript
AngularJS的ng-click传参的方法
2017/06/19 Javascript
使用Webpack提高Vue.js应用的方式汇总(四种)
2017/07/10 Javascript
微信小程序之批量上传并压缩图片的实例代码
2018/07/05 Javascript
Vue.js实现的计算器功能完整示例
2018/07/11 Javascript
AngularJs返回前一页面时刷新一次前面页面的方法
2018/10/09 Javascript
深入理解Vue.js轻量高效的前端组件化方案
2018/12/10 Javascript
JS数组求和的常用方法实例小结
2019/01/07 Javascript
vue点击当前路由高亮小案例
2019/09/26 Javascript
jQuery实现消息弹出框效果
2019/12/10 jQuery
微信小程序对图片进行canvas压缩的方法示例详解
2020/11/12 Javascript
bpython 功能强大的Python shell
2016/02/16 Python
Python分治法定义与应用实例详解
2017/07/28 Python
Python matplotlib绘制饼状图功能示例
2019/09/10 Python
python默认参数调用方法解析
2020/02/09 Python
如何使用Python自动生成报表并以邮件发送
2020/10/15 Python
html5响应式开发自动计算fontSize的方法
2020/01/13 HTML / CSS
美国新蛋IT数码商城:Newegg.com
2016/07/21 全球购物
Java TransactionAPI (JTA) 主要包含几部分
2012/12/07 面试题
医院护士求职自荐信格式
2013/09/21 职场文书
班级活动策划书
2014/02/06 职场文书
校园活动策划方案
2014/06/13 职场文书
2014法院干警廉洁警示教育思想汇报
2014/09/13 职场文书
2016教师校本研修心得体会
2016/01/08 职场文书
毕业生就业推荐表自我鉴定
2019/06/20 职场文书
MySQL REVOKE实现删除用户权限
2021/06/18 MySQL
MySQL之MyISAM存储引擎的非聚簇索引详解
2022/03/03 MySQL
「女孩的钓鱼慢活」全新版权绘公布
2022/03/21 日漫