JavaScript监听手机物理返回键的两种解决方法

时间:2022-08-22 18:16:10

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里必须再声明一次,不然监听返回事件失败。

xback.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监听手机物理返回键的两种解决方法的更多相关文章

  1. VueApp监听手机物理返回键的事件

    代码 第一步创建js文件夹子 在main里面引用   JS文本内容如下 //监听手机物理返回键的事件 document.addEventListener('plusready', function() ...

  2. mui 监听 手机 物理返回键

    mui.back = function(){ return  //禁用物理返回键  也可以写其他逻辑 }

  3. JS监听手机物理返回键,返回到指定页面

    pushHistory(); window.addEventListener("popstate", function(e) { window.location = data.in ...

  4. 页面返回刷新或H5监听(手机的)返回键

    1. pushHistory(); window.addEventListener("popstate", function(e) { alert("我监听到了浏览器的返 ...

  5. H5新特性监听手机的返回键

    var hiddenProperty ='hidden' in document ? 'hidden' :'webkitHidden' in document ? 'webkitHidden' : ' ...

  6. js history对象 手机物理返回键

    有兴趣的可以了解下history对象,不感兴趣也可以直接跳到手机物理返回键监听部分 使用场景: 场景1:项目中一个表单页面,需得填写验证码,填写验证码后提交,由于使用的form直接提交,没有使用AJA ...

  7. javascript监听手机返回键

    javascript监听手机返回键 <pre> if (window.history && window.history.pushState) { $(window).on ...

  8. Html5 监听拦截Android返回键方法详解

    浏览器窗口有一个history对象,用来保存浏览历史. 如果当前窗口先后访问了三个网址,那么history对象就包括三项,history.length属性等于3. history对象提供了一系列方法, ...

  9. WORD 的 Open 和Workbook 的 LoadFromFile 函数返回null的一种解决方法

    WORD Application.Documents.Open 和 Workbook workbookExcel.LoadFromFile 函数返回null的一种解决方法 DCOM Config Se ...

随机推荐

  1. 学会用bootstrap的modal和carousel

    bootstrap框架提供了很多好用的javascript组件,可以很方便的实现常用的js效果,比如点击弹出一个div(modal).下拉菜单.旋转木马(carousel或slider),非常适合前端 ...

  2. hdu 1575 矩阵快速幂模板

    #include "iostream" #include "vector" #include "cstring" using namespa ...

  3. RPi 2B 自动发送获取的IP到固定邮箱

    /************************************************************************* * RPi 2B 自动发送获取的IP到固定邮箱 * ...

  4. 设置SQLServer数据库中某些表为只读的多种方法

    原文:设置SQLServer数据库中某些表为只读的多种方法 翻译自:http://www.mssqltips.com/sqlservertip/2711/different-ways-to-make- ...

  5. MySQL递归查询树状表的子节点、父节点具体实现

    mysql版本(5.5.6等等)尚未支持循环递归查询,和sqlserver.oracle相比,mysql难于在树状表中层层遍历的子节点.本程序重点参考了下面的资料,写了两个sql存储过程,子节点查询算 ...

  6. 4、xamarin forms 设置安卓的toolbar的高度

    降低学习成本是每个.NET传教士义务与责任. 建立生态,保护生态,见者有份. 今天有群友说 如何调整 toolbar 的 高度. 最初遇到这个问题第一反映就是CustomRender 设置高度借助la ...

  7. &lbrack;转载&rsqb;Node入门 &&num;187&semi; 一本全面的Node&period;js教程

    http://www.nodebeginner.org/index-zh-cn.html 作者: Manuel Kiessling 翻译: goddyzhao & GrayZhang &amp ...

  8. 20145209 实验二 《Java面向对象程序设计》 实验报告

    20145209 实验二 <Java面向对象程序设计> 实验报告 实验内容 1.初步掌握单元测试和TDD. 2.理解并掌握面向对象三要素:封装.继承.多态. 3.初步掌握UML建模. 4. ...

  9. Qt-QML-关于两个平级的qml文件中的函数调用问题

    这几天还在继续搞我的QML,感悟就QML是坑的同时,也是一门很号的语言,用于快速搭界面是很好的.那么,这几天, 遇到一个问题,在下用一个框框画一下,希望可以理解 抽象派,解释一下,QML1和QML3是 ...

  10. C&plus;&plus;11 type&lowbar;traits 之is&lowbar;convertible源码分析

    请看源码: struct __sfinae_types { typedef char __one; typedef ]; } __two; }; template<typename _From, ...