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. vuejs组件交互 - 03 - vuex状态管理实现组件交互

    组件交互模式的使用场景 简单应用直接使用props down,event up的模式就可以了 小型应用使用事件中心模式即可 中大型应用使用vuex的状态管理模式 vuex 包含要管理的应用数据和更新数 ...

  2. nuxt框架学习

    1.static和assets文件夹区别 相同点:都可以存放静态文件 不同:assets下的文件 webpack会处理:static文件夹下的文件不会处理. 2.middleware middlewa ...

  3. 使用influx控制台工具操作InfluxDB

    这里记录下influx控制台的简单使用,如需更多功能请参考InfluxDB官方文档: https://docs.influxdata.com/influxdb/v1.1/ 环境: CentOS6.5_ ...

  4. Java之创建对象>4.Enforce noninstantiability with a private constructor

    如果你定义的类仅仅是包含了一些静态的方法和静态的字段,这些类一般是一些工具类,这些一般是设计为不能被实例化的. 1. Attempting to enforce noninstantiability ...

  5. 【DB2】SQL优化

    aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAA

  6. python模块之lib2to3(py2转py3自动化工具)

    # -*- coding: utf-8 -*- #python 27 #xiaodeng #python模块之lib2to3(py2转py3自动化工具) #http://tieba.baidu.com ...

  7. Navicatmysql专版

    Navicat是非常牛逼的公司在数据库可视化方面,做出许多工具...,可视化,为了更加人性化的操作,远离枯燥无味的黑色窗口 一睹真容 捐献一枚注册码 注册码:NAVH-WK6A-DMVK-DKW3 D ...

  8. MongoDB安装实录

      mongodb是nosql中的贵族,很受欢迎... 01.下载 官方:https://www.mongodb.com 社区版.企业版 https://www.mongodb.com/downloa ...

  9. Retrofit、Okhttp使用小记(cookie,accesstoken,POST

    博主在项目中用RxJava也差不多几个月了,但是结合Retrofit使用经验还不是太多.恰好新项目的后台是http+json的,就打算尝试一把. 刚开始由于Retrofit还不太熟,但是后台接口急着测 ...

  10. Easyui入门视频教程 第03集---Easyui布局

    Easyui入门视频教程 第03集---Easyui布局 目录 ----------------------- Easyui入门视频教程 第09集---登录完善 图标自定义   Easyui入门视频教 ...