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 ...
随机推荐
- vuejs组件交互 - 03 - vuex状态管理实现组件交互
组件交互模式的使用场景 简单应用直接使用props down,event up的模式就可以了 小型应用使用事件中心模式即可 中大型应用使用vuex的状态管理模式 vuex 包含要管理的应用数据和更新数 ...
- nuxt框架学习
1.static和assets文件夹区别 相同点:都可以存放静态文件 不同:assets下的文件 webpack会处理:static文件夹下的文件不会处理. 2.middleware middlewa ...
- 使用influx控制台工具操作InfluxDB
这里记录下influx控制台的简单使用,如需更多功能请参考InfluxDB官方文档: https://docs.influxdata.com/influxdb/v1.1/ 环境: CentOS6.5_ ...
- Java之创建对象>4.Enforce noninstantiability with a private constructor
如果你定义的类仅仅是包含了一些静态的方法和静态的字段,这些类一般是一些工具类,这些一般是设计为不能被实例化的. 1. Attempting to enforce noninstantiability ...
- 【DB2】SQL优化
aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAA
- python模块之lib2to3(py2转py3自动化工具)
# -*- coding: utf-8 -*- #python 27 #xiaodeng #python模块之lib2to3(py2转py3自动化工具) #http://tieba.baidu.com ...
- Navicatmysql专版
Navicat是非常牛逼的公司在数据库可视化方面,做出许多工具...,可视化,为了更加人性化的操作,远离枯燥无味的黑色窗口 一睹真容 捐献一枚注册码 注册码:NAVH-WK6A-DMVK-DKW3 D ...
- MongoDB安装实录
mongodb是nosql中的贵族,很受欢迎... 01.下载 官方:https://www.mongodb.com 社区版.企业版 https://www.mongodb.com/downloa ...
- Retrofit、Okhttp使用小记(cookie,accesstoken,POST
博主在项目中用RxJava也差不多几个月了,但是结合Retrofit使用经验还不是太多.恰好新项目的后台是http+json的,就打算尝试一把. 刚开始由于Retrofit还不太熟,但是后台接口急着测 ...
- Easyui入门视频教程 第03集---Easyui布局
Easyui入门视频教程 第03集---Easyui布局 目录 ----------------------- Easyui入门视频教程 第09集---登录完善 图标自定义 Easyui入门视频教 ...