1 前言
如今 h5 新特性新标签新规范等有很多, 而且正在不断完善中, 各大浏览器商对它们的支持, 也是相当给力作为前端程序员, 我觉得我们还是有必要积极关注并勇敢地加以实践接下来我将和各位分享一个特别好用的 h5 新特性 (目前也不是特别新), 轻松监听任何 App 自带的返回键, 包括安卓机里的物理返回键, 从而实现项目开发中进一步的需求
2 起因
大概半年前接到 pm 一需求, 用纯 h5 实现多 audio 的播放暂停续播, 页面放至驾考宝典 App 中, 与客户端没有任何的交互, 所以与客户端相关的 js 不需要引用看上去这需求挺简单的嘛, 虽然之前也没做过类似的需求不管三七二十一, 撸起袖子就是干开始了学习之旅
3 我这里着重介绍下我具体是怎么监听任何 App 自带的返回键, 以及安卓机里的物理返回键
那为什么我要去监听呢, 这里我有必要强调强调再强调苹果手机不管是微信 QQApp, 还是浏览器里, 涉及到 audiovideo, 返回上一页系统会自动暂停当前的播放的, 但不是所有安卓机都可以所以我们自己必须自定义监听很多朋友可能第一想法就是百度, 然后出来的答案无非是这样
- pushHistory();
- window.addEventListener("popstate", function(e) {
- alert("我监听到了浏览器的返回按钮事件啦");// 根据自己的需求实现自己的功能
- }, false);
- function pushHistory() {
- var state = {
- title: "title",
- url: "#"
- };
- window.history.pushState(state, "title", "#");
- }
是不是很眼熟? 然而关键需求不能完美实现, 要这段代码有何用, 当时我也是绞尽脑汁直到经过大神好友指导, 复制了这段代码
- var hiddenProperty = 'hidden' in document ? 'hidden' :
- 'webkitHidden' in document ? 'webkitHidden' :
- 'mozHidden' in document ? 'mozHidden' :
- null;
- var visibilityChangeEvent = hiddenProperty.replace(/hidden/i, 'visibilitychange');
- var onVisibilityChange = function(){
- if (document[hiddenProperty]) {
- console.log('页面非激活');
- }else{
- console.log('页面激活')
- }
- }
- document.addEventListener(visibilityChangeEvent, onVisibilityChange);
所有问题迎刃而解
这段代码的原理我个人理解就是通过判断用户浏览的是否为当前页, 从而进行相关操作
这是 MDN 相关链接: https://developer.mozilla.org
4 手机兼容性
众所周知现在的安卓机系统 4.0 等都是低配版了, 该属性大部分安卓机都能识别, 个人低配版安卓机无法识别, 原因在于 navigator.userAgent 内核版本过低, chrome 现在很多是 64 + 了, 所以遇到该问题只要想办法兼容它就好了
并不是说真的可以通过 JS 监听到用户对 App 里的自带返回键的直接操作, 甚至安卓的物理返回键, 而是通过转变思路, 快速实现需求希望这个特性能帮到各位
来源: http://www.jqhtml.com/13623.html