JavaScript监听手机物理返回键的两种解决方法
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 ...
随机推荐
- Nginx 访问日志分析
0:Nginx日志格式配置 # vim nginx.conf ## # Logging Settings ## log_format access '$remote_addr - $remote_us ...
- IDEA中Gradle插件的使用
Idea本身已经集成了Gradle插件,你可以在File | Settings | Build, Execution, Deployment | Build Tools | Gradle 下找到 相关 ...
- React (native) 相关知识
container component provider组件 react里的redux进阶玩法 react组件的生命周期 conductor / componentWillMount / render ...
- C语言之函数调用06—彩球排列
//函数调用+递归法 /* ========================================================== 题目:将4个红球,3个白球.3个黄球排成一排,共同拥有 ...
- html增加和删除div
<!DOCTYPE HHTML"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> ...
- Keepalived系列一:安装Keepalived
1:简介 它是一个基于VRRP协议来实现的WEB服务高可用方案,可以利用其来避免单点故障.一个WEB服务至少会有2台服务器运行Keepalived,一台为主服务器(MASTER),一台为备份服务器(B ...
- 请指出document load和document ready的区别?
共同点:这两种事件都代表的是页面文档加载时触发. 异同点: ready 事件的触发,表示文档结构已经加载完成(不包含图片等非文字媒体文件). onload 事件的触发,表示页面包含图片等文件在内的所有 ...
- PgSql备份pg_dump与还原手记pg_restore
真没有想到,以前一直是PostgreSQL使用者,突然需要库移植又成了头一招了!原来它与mysql命令行操作区别还挺大.不用怕,但绝对要细心,因为数据库操作是网站的核心,一旦出现损坏或丢失,后果就非常 ...
- CentOS卸载Oracle 11gR2(x64)
环境 OS: CentOS 7.4; hosts: L134; IP: 192.168.1.134 Oracle安装文件目录:/opt/oracle_install ORACLE_BASE:/data ...
- java 数据类型与数据库 数据类型的对应关系
java 数据类型与数据库 数据类型的对应关系 CreationTime--2018年7月1日10点08分 Author:Marydon 相关推荐: java 读取clob