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. Keepalived系列一:Keepalived.conf 详解

    接上一篇博客: http://www.cnblogs.com/xiaoit/p/4499703.html 1:按照上篇博客安装后的配置文件在 /usr/local/etc/keepalived/kee ...

  2. JVM的结构

    参考:http://blog.csdn.net/tonytfjing/article/details/44278233 JVM的结构 一般认为,JVM分为四大部分:     1.类加载器(ClassL ...

  3. Java之所有对象的公用方法>9.Always override hashCode when you override equals

     You must override hashCode in every class that overrides equals.

  4. Java通过Fork/Join来优化并行计算

    Java代码: package Threads; import java.util.concurrent.ForkJoinPool; import java.util.concurrent.Recur ...

  5. java 封装02

    //Person.java public class Person{ private String name; private int age; private String sex; public ...

  6. (转载)【TP5.0】设置session有效时长+修改默认存储路径

        //查看默认session存储路径:print_r(session_save_path());   \thinkphp\helper.php if (!function_exists('ses ...

  7. 【laravel5.4】安装predis

    1.服务器先安装redis-server,这是毋庸置疑的!!! 2.服务器开启redis-server,配置相关参数 3.laravel执行 : $  yourPhpPath composer.pha ...

  8. oracle安装后tnsnames.ora内容

    # tnsnames.ora Network Configuration File: D:\Develop\oracle11g\product\11.2.0\dbhome_1\network\admi ...

  9. jQuery对象复制

    // 浅层复制(只复制顶层的非 object 元素) var newObject = jQuery.extend({}, oldObject); // 深层复制(一层一层往下复制直到最底层) var ...

  10. std::string std::wstring 删除最后元素 得到最后元素

    std::string str = "abcdefg,"; std::cout << "last character:"<<str.ba ...