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的输入框无值自动显示指定数据的实现代码
Jan 24 Javascript
用jquery和json从后台获得数据集的代码
Nov 07 Javascript
js关于精确计算和数值格式化以及直接引js文件
Jan 28 Javascript
jquery实现触发时更新下拉列表内容的方法
Dec 02 Javascript
URL中“#” “?” &“”号的作用浅析
Feb 04 Javascript
jQuery实现级联下拉框实战(5)
Feb 08 Javascript
Bootstrap进度条与AJAX后端数据传递结合使用实例详解
Apr 23 Javascript
JS实现的tab页切换效果完整示例
Dec 18 Javascript
如何自动化部署项目?折腾服务器之旅~
Apr 16 Javascript
Vue 刷新当前路由的实现代码
Sep 26 Javascript
jQuery实现滑动开关效果
Aug 02 jQuery
使用JavaScript实现贪吃蛇游戏
Sep 29 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+MYSQL的文章管理系统(一)
2006/10/09 PHP
使PHP自定义函数返回多个值
2006/11/26 PHP
php download.php实现代码 跳转到下载文件(response.redirect)
2009/08/26 PHP
php empty()与isset()区别的详细介绍
2013/06/17 PHP
浅谈php中变量的数据类型判断函数
2017/03/04 PHP
php实现JWT(json web token)鉴权实例详解
2019/11/05 PHP
PHP高并发和大流量解决方案整理
2021/03/09 PHP
简单通用的JS滑动门代码
2008/12/19 Javascript
JS动态获取当前时间,并写到特定的区域
2013/05/03 Javascript
js写的方法实现上传图片之后查看大图
2014/03/05 Javascript
Javascript无参数和有参数类继承问题解决方法
2015/03/02 Javascript
JS实现的简洁纵向滑动菜单(滑动门)效果
2015/10/19 Javascript
BootStrap Validator使用注意事项(必看篇)
2016/09/28 Javascript
vue实现ToDoList简单实例
2017/02/07 Javascript
js学习总结之dom2级事件基础知识详解
2017/07/27 Javascript
JS中正则表达式要注意lastIndex属性
2017/08/08 Javascript
jQuery选择器之子元素过滤选择器
2017/09/28 jQuery
angularJS的radio实现单项二选一的使用方法
2018/02/28 Javascript
如何解决React官方脚手架不支持Less的问题(小结)
2018/09/12 Javascript
clipboard在vue中的使用的方法示例
2018/10/19 Javascript
js实现json数组分组合并操作示例
2019/02/12 Javascript
vue-video-player 解决微信自动全屏播放问题(横竖屏导致样式错乱问题)
2020/02/25 Javascript
pymssql ntext字段调用问题解决方法
2008/12/17 Python
python中尾递归用法实例详解
2015/04/28 Python
探究Python的Tornado框架对子域名和泛域名的支持
2015/05/02 Python
怎样使用Python脚本日志功能
2016/08/14 Python
详解通过API管理或定制开发ECS实例
2018/09/30 Python
python爬虫开发之Beautiful Soup模块从安装到详细使用方法与实例
2020/03/09 Python
Python函数递归调用实现原理实例解析
2020/08/11 Python
简述Html5 IphoneX 适配方法
2018/02/08 HTML / CSS
程序员经常用到的UNIX命令
2015/04/13 面试题
公务员试用期满考核材料
2014/05/22 职场文书
2014年党委工作总结
2014/11/22 职场文书
2015年学校团委工作总结
2015/05/26 职场文书
中学团支部工作总结
2015/08/13 职场文书
Redis实现短信验证码登录的示例代码
2022/06/14 Redis