最近搞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. RFID开发笔记 Alien阅读器文档

    1. 开机使用serial connect,完成boot后使用TCP/IP协议与主机通信 2.TagList,是一个活跃标签的列表,这里活跃的含义是在一个间隔里被监听到.如果一个标签之前没有被监听到, ...

  2. 国内最大的 Node.js 社区将 New Relic 的监控产品换成了 OneAPM

    国内最知名的 CNode 社区把 New Relic 的监控产品换成了 OneAPM .难道 APM 的老大 New Relic 已经被 OneAPM 超越? 毋庸置疑,在全球应用性能管理 SaaS ...

  3. POJ1276Cash Machine

    http://poj.org/problem?id=1276 题意 : 给你一个目标钱数,再给你钱币的种数和钱币的面值,让你用这些钱凑出不大于目标钱数的钱然后输出这个最接近且不大于目标钱数的钱. 思路 ...

  4. [转]HttpClient的超时用法小记

    HttpClient的超时用法小记 HttpClient在使用中有两个超时时间,是一直接触和使用的,由于上次工作中使用httpClient造成了系统悲剧的情况,特地对它的两个超时时间进行了小小的测试, ...

  5. BZOJ 3720 gty的妹子树

    块状树裸题 块状树: 首先对树进行分块,分出的每一块都是一个连通块 通常的分块的方式如下: 1.父亲所在块不满,分到父亲所在块中 2.父亲所在块满,自己单独开一个块 (貌似有更为优越的分块方式? 注意 ...

  6. 李洪强iOS开发之Foundation框架—结构体

    Foundation框架—结构体 一.基本知识 Foundation—基础框架.框架中包含了很多开发中常用的数据类型,如结构体,枚举,类等,是其他ios框架的基础. 如果要想使用foundation框 ...

  7. lintcode 中等题:Majority number II 主元素 II

    题目 主元素II 给定一个整型数组,找到主元素,它在数组中的出现次数严格大于数组元素个数的三分之一. 样例 给出数组[1,2,1,2,1,3,3] 返回 1 注意 数组中只有唯一的主元素 挑战 要求时 ...

  8. React-用ImmutableJS提高性能

    一.需求 1.子组件有更新时,只重新渲染有变化的子组件,而不是全部 二.ImmutableJS原理 三.代码 1.CheckboxWithLabel.jsx var React = require(' ...

  9. PCL—低层次视觉—关键点检测(NARF)

    关键点检测本质上来说,并不是一个独立的部分,它往往和特征描述联系在一起,再将特征描述和识别.寻物联系在一起.关键点检测可以说是通往高层次视觉的重要基础.但本章节仅在低层次视觉上讨论点云处理问题,故所有 ...

  10. Java API —— 网络编程

    1.网络编程概述     1)网络编程概述     · 计算机网络         是指将地理位置不同的具有独立功能的多台计算机及其外部设备,通过通信线路连接起来,在网络操作系统,网络管理软件及网络通 ...