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监听手机物理返回键的两种解决方法的更多相关文章
-
VueApp监听手机物理返回键的事件
代码 第一步创建js文件夹子 在main里面引用 JS文本内容如下 //监听手机物理返回键的事件 document.addEventListener('plusready', function() ...
-
mui 监听 手机 物理返回键
mui.back = function(){ return //禁用物理返回键 也可以写其他逻辑 }
-
JS监听手机物理返回键,返回到指定页面
pushHistory(); window.addEventListener("popstate", function(e) { window.location = data.in ...
-
页面返回刷新或H5监听(手机的)返回键
1. pushHistory(); window.addEventListener("popstate", function(e) { alert("我监听到了浏览器的返 ...
-
H5新特性监听手机的返回键
var hiddenProperty ='hidden' in document ? 'hidden' :'webkitHidden' in document ? 'webkitHidden' : ' ...
-
js history对象 手机物理返回键
有兴趣的可以了解下history对象,不感兴趣也可以直接跳到手机物理返回键监听部分 使用场景: 场景1:项目中一个表单页面,需得填写验证码,填写验证码后提交,由于使用的form直接提交,没有使用AJA ...
-
javascript监听手机返回键
javascript监听手机返回键 <pre> if (window.history && window.history.pushState) { $(window).on ...
-
Html5 监听拦截Android返回键方法详解
浏览器窗口有一个history对象,用来保存浏览历史. 如果当前窗口先后访问了三个网址,那么history对象就包括三项,history.length属性等于3. history对象提供了一系列方法, ...
-
WORD 的 Open 和Workbook 的 LoadFromFile 函数返回null的一种解决方法
WORD Application.Documents.Open 和 Workbook workbookExcel.LoadFromFile 函数返回null的一种解决方法 DCOM Config Se ...
随机推荐
-
学会用bootstrap的modal和carousel
bootstrap框架提供了很多好用的javascript组件,可以很方便的实现常用的js效果,比如点击弹出一个div(modal).下拉菜单.旋转木马(carousel或slider),非常适合前端 ...
-
hdu 1575 矩阵快速幂模板
#include "iostream" #include "vector" #include "cstring" using namespa ...
-
RPi 2B 自动发送获取的IP到固定邮箱
/************************************************************************* * RPi 2B 自动发送获取的IP到固定邮箱 * ...
-
设置SQLServer数据库中某些表为只读的多种方法
原文:设置SQLServer数据库中某些表为只读的多种方法 翻译自:http://www.mssqltips.com/sqlservertip/2711/different-ways-to-make- ...
-
MySQL递归查询树状表的子节点、父节点具体实现
mysql版本(5.5.6等等)尚未支持循环递归查询,和sqlserver.oracle相比,mysql难于在树状表中层层遍历的子节点.本程序重点参考了下面的资料,写了两个sql存储过程,子节点查询算 ...
-
4、xamarin forms 设置安卓的toolbar的高度
降低学习成本是每个.NET传教士义务与责任. 建立生态,保护生态,见者有份. 今天有群友说 如何调整 toolbar 的 高度. 最初遇到这个问题第一反映就是CustomRender 设置高度借助la ...
-
[转载]Node入门 &#187; 一本全面的Node.js教程
http://www.nodebeginner.org/index-zh-cn.html 作者: Manuel Kiessling 翻译: goddyzhao & GrayZhang & ...
-
20145209 实验二 《Java面向对象程序设计》 实验报告
20145209 实验二 <Java面向对象程序设计> 实验报告 实验内容 1.初步掌握单元测试和TDD. 2.理解并掌握面向对象三要素:封装.继承.多态. 3.初步掌握UML建模. 4. ...
-
Qt-QML-关于两个平级的qml文件中的函数调用问题
这几天还在继续搞我的QML,感悟就QML是坑的同时,也是一门很号的语言,用于快速搭界面是很好的.那么,这几天, 遇到一个问题,在下用一个框框画一下,希望可以理解 抽象派,解释一下,QML1和QML3是 ...
-
C++11 type_traits 之is_convertible源码分析
请看源码: struct __sfinae_types { typedef char __one; typedef ]; } __two; }; template<typename _From, ...