最近搞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. 混合开发监听安卓手机物理返回键

    混合开发监听安卓手机物理返回键 在用h5做混合开发过程中由于有个考试考试页面,中途不能退出,退出要添加确认操作,所以需要监听手机的返回操作,不让用户直接通过返回键返回 目前了解到混合开发中有两种方式监 ...

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

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

  3. android底层按键监听,Android应用中Back键的监听及处理实例

    MainActivity如下: package cn.testnbackpressed; import android.os.Bundle; import android.view.KeyEvent; ...

  4. 微信H5如何关闭浏览器(如何监听手机的物理返回键)

    一.背景 背景是这样的:该项目进入h5时会通过 location.replace(xxx) 或 location.href = xxx 跳转到某个地址①,该地址会请求获得微信 openId:获取成功后 ...

  5. android 监听物理返回键,Android应用开发之react-native 监听Android物理返回键

    本文将带你了解Android应用开发之react-native 监听Android物理返回键,希望本文对大家学Android有所帮助. 1. componentWillMount(){         ...

  6. iOS小技能:监听H5页面goBack返回事件 网页监听APP返回键 (NavigationBackItemInjection)

    文章目录 引言 I . iOS监听H5页面goBack返回事件 1.1 UIWebView 监听H5页面goBack返回事件 1.2 WKWebView监听H5页面goBack返回事件 II. 网页监 ...

  7. Android 监听USB设备插拔事件

    通过注册广播的方式监听USB设备 . 广播Action UsbManager.ACTION_USB_DEVICE_ATTACHED Usb设备插入或者挂载事件通知 UsbManager.ACTION_ ...

  8. android 回退函数,详解React Native监听Android回退按键与程序化退出应用

    详解React Native监听Android回退按键与程序化退出应用 发布时间:2020-09-29 09:25:52 来源:脚本之家 阅读:137 作者:lqh 详解React Native监听A ...

  9. android 屏幕方向监听,Android如何监听屏幕旋转

    背景 关于个人,前段时间由于业务太忙,所以一直没有来得及思考并且沉淀点东西:同时组内一个个都在业务上能有自己的思考和总结,在这样的氛围下,不由自主的驱使周末开始写点东西,希望自己除了日常忙于业务,可以 ...

最新文章

  1. 服务器磁盘阵列做win7系统,Raid0可以安装winxp-x86,但不能安装win7-x64,是怎么回事呢?!...
  2. ThreadLocal 原理 以及设计思想
  3. python read_csv chunk_Python 数据分析之逐块读取文本的实现
  4. Grunt-cli的执行过程以及Grunt加载原理
  5. 用正则表达式抓取网络连接的简单实现
  6. (转)周明:未来5-10年,自然语言处理将走向成熟
  7. 初学Python选什么版本?
  8. 机器人词库 python字典_('python,2017-robot-编程字典',)
  9. 试用Windows Server 2008
  10. python idle是什么_idle是什么意思
  11. android调用Camera.open方法报错“Too many cameras already open”
  12. layui-模糊查询后在数据表格中显示
  13. 哈希(hash)理解
  14. Yii Framework 开发教程(35) Zii组件-Button示例
  15. 基于滴滴云搭建 Ceph 开发环境
  16. 金蝶软件怎么过账_金蝶专业版怎么反过账
  17. [EXCEL] 用excel做动态仪表盘,so easy~
  18. 月费99,融资过亿,这个老阿里人做出了便利店式健身房
  19. 看了这篇文章我才真正理解了!和快手大佬的技术面谈,附架构师必备技术详解
  20. Linux终端光标的调整方法

热门文章

  1. 阿里云CDN缓存总结
  2. selenium+python自动化82-只截某个元素的图
  3. Quartz.NET实现作业调度
  4. Selenium碰到的异常记录
  5. 【转】CSS transitions#CSS3变换入门
  6. OpenCV重复播放摄像头视频,循环播放摄像头(视频)文件,循环播放视频中某一段视频
  7. Q143:FS,物质导数(Material Derivative)
  8. 数据结构之广义表的相关知识点
  9. android程序安装空间不足,AndroidStudio提示磁盘空间不足
  10. linux+yum安装终端php,centos下yum搭建安装linux+apache+mysql+php环境教程