从网页监听Android设备的返回键
最近搞Android项目的时候,遇到一个比较蛋疼的需求,需要从Client App调用系统浏览器打开一个页面,进行杂七杂八的一些交互之后,返回到App。如何打开浏览器和如何返回App这里就不说了,有兴趣的童鞋可私下交流。
之所以说这个需求蛋疼,是因为Android有个物理返回键啊……返回键啊……键啊……啊……
用户按下返回键后,预期应该跟点击页面上的返回键一样——返回App。然而这个返回键的被按下的时候网页完全不知道啊(onbeforeunload不算),找不到直接的办法去监听,愁死我们这全苦逼程序员鸟~
虽然啊不能直接监听,曲线救国的办法,还是有滴。
经过艰苦卓绝的寻找,发现使用HTML5的History可以稍微模拟到返回键的按下事件。原理如下:
- 页面加载完成时,调用history.pushState写入一个指定状态STATE,并监听window.onpopstate;
- 当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');
});
不过这个方法有些缺陷:
- 如果项目本身使用了pushState,则历史记录会有瑕疵(多了一个历史);
- 浏览器的后退按钮点击以及调用history.back()也会被当成按下了返回键。
But anyway,对于结构和逻辑比较简单的跳转页来说(就是为了返回App用的),这个方法还是蛮实用的,对不对?嘻嘻~
从网页监听Android设备的返回键的更多相关文章
- vue监听移动设备的返回事件
在公共方法文件common.js中实现一个存储当前历史记录的方法 common.js // 存储当前历史记录点,实现控制手机物理返回键的按钮事件 var pushHistory = function ...
- 在 React 组件中监听 android 手机物理返回/回退/back键事件
当前端页面嵌入到 webview 中运行时,有时会需要监听手机的物理返回按键事件来做一些自定义的操作. 比如我最近遇到的,在一个页面里面有批量选择的功能,当点击手机的返回键时,清除页面上的选中状态.我 ...
- HTML5 监听移动端浏览器返回键兼容版本
// 往windosw对象中的历史记录注入URL的方法 function addUrl() { var state = { title: "title", url: "# ...
- vue里监听安卓的物理返回键
Hybrid App中,原生内嵌H5单页,由于安卓是有物理返回键的,按安卓物理返回键的时候会返回到上一个路由. 实际中需求是:当有弹层的时候,按物理返回键是关闭弹层,是页面的时候才执行返回上一个路由, ...
- Cocos Creator 监听安卓屏幕下方返回键
addEscEvent = function(node){ cc.eventManager.addListener({ event: cc.EventListener.KEYBOARD, onKeyP ...
- vue 定义全局函数,监听android返回键事件
vue 定义全局函数,监听android返回键事件 方法一:main.js 注入(1)在main.js中写入函数Vue.prototype.changeData = function (){ aler ...
- 监听Android CTS测试项解决方案(二)
二,监听当前测试项是否是Accelerometer Measurement Test测试项 通过第一种方式介绍的,我们可以得到当前处于活动状态的Activity类似监听CTS测试当前的测试项.但是由于 ...
- 监听Android CTS测试项解决方案(一)
前言: 首先这里需要详细叙述一下标题中"监听Android CTS测试项解决方案"的需求.这里的需求是指我们需要精确的监听到当前CTS测试正在测试的测试项. 因为我们知道CTS认证 ...
- c# 获取移动硬盘信息、监听移动设备的弹出与插入事件
原文 http://www.cnblogs.com/coolkiss/p/3328825.html 备忘一下改功能,主要通过WMI来实现,对于监听外接设备的弹出和插入事件一开始使用IntPtr Wnd ...
随机推荐
- HTTP/2 对 Web 性能的影响(上)
一.前言 HTTP/2 于 2015 年 5 月正式推出.自诞生以来,它就一直在影响着网络性能最佳实践.在本篇文章中,我们将讨论 HTTP/2 的二进制帧.延迟削减.潜在利弊以及相应的应对措施. 超文 ...
- 【面试题015】链表中倒数第k个结点
[面试题015]链表中倒数第k个结点 可以用两个指针,当第一个指针指向了第k个时候,第二个指针让他指向链表的第一个元素,然后这两个指针同时向后面移动, 当第一个指针移动到末尾的时候,第二个指针指 ...
- Eclipse Error: Unable to set localhost. This prevents creation of a GUID.
Symptoms The following error appears in the atlassian-confluence.log: 2011-03-16 18:20:03,021 ERROR ...
- 【leetcode】Add Two Numbers(middle) ☆
You are given two linked lists representing two non-negative numbers. The digits are stored in rever ...
- hdu 4430 Yukari's Birthday
思路: 分析知道1<=r<40:所以可以枚举r,之后再二分k. 代码如下: #include<iostream> #include<stdio.h> #includ ...
- chmod命令详细用法
指令名称 : chmod 使用权限 : 所有使用者 使用方式 : chmod [-cfvR] [--help] [--version] mode file... 说明 : Linux/Unix 的档案 ...
- C# Regex类用法
使用Regex类需要引用命名空间:using System.Text.RegularExpressions; 利用Regex类实现全部匹配输出 string str = "test43232 ...
- Highcharts中初始化最大值与最小值的柱状图
<!doctype html> <html lang="en"> <head> <script type="text/javas ...
- 李洪强漫谈iOS开发[C语言-007]-语言标准简介
C语言是介于低级语言和高级语言之间的 一个应用程序 C语言在嵌入式上使用,的确是具有低级语言的特征 直接操作硬件,扫描内存 访问到的都是虚拟内存,一个应用程序占多大内存? 表示最多 可以放多少条指令 ...
- 推荐:根据ISBN号查询图书信息的API - 豆瓣API
转帖,出处:http://blog.csdn.net/berryreload/article/details/9126645 版权声明:本文为博主原创文章,未经博主允许不得转载. 找了半天,还是豆瓣的 ...