最近搞Android项目的时候,遇到一个比较蛋疼的需求,需要从Client App调用系统浏览器打开一个页面,进行杂七杂八的一些交互之后,返回到App。如何打开浏览器和如何返回App这里就不说了,有兴趣的童鞋可私下交流。

之所以说这个需求蛋疼,是因为Android有个物理返回键啊……返回键啊……键啊……啊……

用户按下返回键后,预期应该跟点击页面上的返回键一样——返回App。然而这个返回键的被按下的时候网页完全不知道啊(onbeforeunload不算),找不到直接的办法去监听,愁死我们这全苦逼程序员鸟~

虽然啊不能直接监听,曲线救国的办法,还是有滴。

经过艰苦卓绝的寻找,发现使用HTML5的History可以稍微模拟到返回键的按下事件。原理如下:

  1. 页面加载完成时,调用history.pushState写入一个指定状态STATE,并监听window.onpopstate;
  2. 当onpopstate被触发时,检查event.state是否等于STATE,如果相等,表示页面发生了后退(按下返回键或者浏览器的后退按钮),则把这次行为当作是返回键被按下了(把点击浏览器的后退按钮也误算进来了,不过没啥好法子了呀)。

嗯,为了方便调用,把这个逻辑稍微封装了下,代码见这里(https://github.com/iazrael/xback),使用方法如下:

XBack.listen(function(){
alert('oh! you press the back button');
}); XBack.listen(function(){
alert('ah, press press press');
});

不过这个方法有些缺陷:

  1. 如果项目本身使用了pushState,则历史记录会有瑕疵(多了一个历史);
  2. 浏览器的后退按钮点击以及调用history.back()也会被当成按下了返回键。

But anyway,对于结构和逻辑比较简单的跳转页来说(就是为了返回App用的),这个方法还是蛮实用的,对不对?嘻嘻~

从网页监听Android设备的返回键的更多相关文章

  1. vue监听移动设备的返回事件

    在公共方法文件common.js中实现一个存储当前历史记录的方法 common.js // 存储当前历史记录点,实现控制手机物理返回键的按钮事件 var pushHistory = function ...

  2. 在 React 组件中监听 android 手机物理返回/回退/back键事件

    当前端页面嵌入到 webview 中运行时,有时会需要监听手机的物理返回按键事件来做一些自定义的操作. 比如我最近遇到的,在一个页面里面有批量选择的功能,当点击手机的返回键时,清除页面上的选中状态.我 ...

  3. HTML5 监听移动端浏览器返回键兼容版本

    // 往windosw对象中的历史记录注入URL的方法 function addUrl() { var state = { title: "title", url: "# ...

  4. vue里监听安卓的物理返回键

    Hybrid App中,原生内嵌H5单页,由于安卓是有物理返回键的,按安卓物理返回键的时候会返回到上一个路由. 实际中需求是:当有弹层的时候,按物理返回键是关闭弹层,是页面的时候才执行返回上一个路由, ...

  5. Cocos Creator 监听安卓屏幕下方返回键

    addEscEvent = function(node){ cc.eventManager.addListener({ event: cc.EventListener.KEYBOARD, onKeyP ...

  6. vue 定义全局函数,监听android返回键事件

    vue 定义全局函数,监听android返回键事件 方法一:main.js 注入(1)在main.js中写入函数Vue.prototype.changeData = function (){ aler ...

  7. 监听Android CTS测试项解决方案(二)

    二,监听当前测试项是否是Accelerometer Measurement Test测试项 通过第一种方式介绍的,我们可以得到当前处于活动状态的Activity类似监听CTS测试当前的测试项.但是由于 ...

  8. 监听Android CTS测试项解决方案(一)

    前言: 首先这里需要详细叙述一下标题中"监听Android CTS测试项解决方案"的需求.这里的需求是指我们需要精确的监听到当前CTS测试正在测试的测试项. 因为我们知道CTS认证 ...

  9. c# 获取移动硬盘信息、监听移动设备的弹出与插入事件

    原文 http://www.cnblogs.com/coolkiss/p/3328825.html 备忘一下改功能,主要通过WMI来实现,对于监听外接设备的弹出和插入事件一开始使用IntPtr Wnd ...

随机推荐

  1. RAD项目结构

  2. How to Enable 64-bit Processes for Enhanced Protected Mode in Internet Explorer 11 (IE11)

       Information Enhanced Protected Mode (EPM) adds additional security to Protected Mode and includes ...

  3. SPOJ LCS2 后缀自动机

    多串的LCS,注意要利用拓扑序更新suf的len. 我用min,max,三目会超时,所以都改成了if,else #pragma warning(disable:4996) #include<cs ...

  4. LightOj 1065 - Number Sequence (矩阵快速幂,简单)

    题目 和 LightOj 1096 - nth Term 差不多的题目和解法,这道相对更简单些,万幸,这道比赛时没把模版给抽风坏. #include<stdio.h> #include&l ...

  5. ***iOS 项目的目录结构能看出你的开发经验

    最近有师弟去面试iOS开发,他谈论到,面试官竟然问他怎么分目录结构的,而且还具体问到每个子目录的文件名. 目录结构确实很重要,面试官问他这些无疑是想窥探他的开发经验.清晰的目录结构,可让人一眼知道对应 ...

  6. ****Git 常用命令和使用思维导图

    Git 是一个很强大的分布式版本控制系统.它不但适用于管理大型开源软件的源代码,管理私人的文档和源代码也有很多优势. 本来想着只把最有用.最常用的 Git 命令记下来,但是总觉得这个也挺有用.那个也用 ...

  7. 关于DotNetBar中DataGridViewX 自动全屏 Anchor属性无效问题

    由于在DataGridViewX 中使用了控件DataGridViewCheckBoxXColumn会导致 Anchor属性无效问题化,具体原因未知,建议改换为系统自带的DataGridViewChe ...

  8. FWT 学习总结

    我理解的FWT是在二元运算意义下的卷积 目前比较熟练掌握的集合对称差卷积 对于子集卷积和集合并卷积掌握不是很熟练(挖坑ing) 那么就先来谈一谈集合对称差卷积吧 所谓集合对称差卷积 就是h(i)=si ...

  9. 【nginx运维基础(3)】Nginx的编译PHP

    Apache默认是把PHP作为本身的一个模块(mod_php)来运行的,而Nginx是以FastCGI方式运行的.所以使用Nginx+PHP就是直接配置为FastCGI模式. 安装PHP 下载地址: ...

  10. QSS的作用需要正确设置文件编码才能起作用

    QT这个库,无非使用OO对跨平台做了绝佳的封装,这其中的主要工作也就是比较繁琐而已,但并不多么了不起.唯独其中提供的QSS功能,让我感到十分神奇,做出来的效果实在很惊艳,而使用代码却又是如此简单,而且 ...