查看原文
其他

使用 h5 新特性,轻松监听任何 App 自带返回键

前端大全 2020-01-13

(点击上方公众号,可快速关注)


作者:驾考宝典WckY

segmentfault.com/a/1190000013700474


1、前言

如今h5新特性、新标签、新规范等有很多,而且正在不断完善中,各大浏览器商对它们的支持,也是相当给力。作为前端程序员,我觉得我们还是有必要积极关注并勇敢地加以实践。接下来我将和各位分享一个特别好用的h5新特性(目前也不是特别新),轻松监听任何App自带的返回键,包括安卓机里的物理返回键,从而实现项目开发中进一步的需求。

2、起因

大概半年前接到pm一需求,用纯h5实现多audio的播放、暂停、续播,页面放至App中,与客户端没有任何的交互,所以与客户端相关的js不需要引用。看上去这需求挺简单的嘛,虽然之前也没做过类似的需求。不管三七二十一,开始了学习之旅。

3、我这里着重介绍下我具体是怎么监听任何App自带的返回键,以及安卓机里的物理返回键。

那为什么我要去监听呢,这里我有必要强调强调再强调。苹果手机不管是微信、QQ、App,还是浏览器里,涉及到audio、video,返回上一页系统会自动暂停当前的播放的,但不是所有安卓机都可以。所以我们自己必须自定义监听。很多朋友可能第一想法就是百度,然后出来的答案无非是这样:

   pushHistory();

  1.    window.addEventListener("popstate", function(e) {

  2.        alert("我监听到了浏览器的返回按钮事件啦");//根据自己的需求实现自己的功能

  3.    }, false);

  4.    function pushHistory() {

  5.        var state = {

  6.            title: "title",

  7.            url: "#"

  8.        };

  9.        window.history.pushState(state, "title", "#");

  10.    }

是不是很眼熟?然而关键需求不能完美实现,要这段代码有何用,当时我也是绞尽脑汁。直到经过大神好友指导,复制了这段代码:

  1.    var hiddenProperty = 'hidden' in document ? 'hidden' :    

  2.        'webkitHidden' in document ? 'webkitHidden' :    

  3.        'mozHidden' in document ? 'mozHidden' :    

  4.        null;

  5.    var visibilityChangeEvent = hiddenProperty.replace(/hidden/i, 'visibilitychange');

  6.    var onVisibilityChange = function(){

  7.        if (document[hiddenProperty]) {    

  8.            console.log('页面非激活');

  9.        }else{

  10.            console.log('页面激活')

  11.        }

  12.    }

  13.    document.addEventListener(visibilityChangeEvent, onVisibilityChange);

所有问题迎刃而解。

这段代码的原理我个人理解就是通过判断用户浏览的是否为当前页,从而进行相关操作。

这是MDN相关链接:https://developer.mozilla.org/zh-CN/docs/Web/API/Document/hidden。

4、手机兼容性

众所周知现在的安卓机系统4.0等都是低配版了,该属性大部分安卓机都能识别,个人低配版安卓机无法识别,原因在于 navigator.userAgent内核版本过低,chrome现在很多是64+了,所以遇到该问题只要想办法兼容它就好了。

并不是说真的可以通过JS监听到用户对App里的自带返回键的直接操作,甚至安卓的物理返回键,而是通过转变思路,快速实现需求。希望这个特性能帮到各位。


【关于投稿】


如果大家有原创好文投稿,请直接给公号发送留言。


① 留言格式:
【投稿】+《 文章标题》+ 文章链接

② 示例:
【投稿】《不要自称是程序员,我十多年的 IT 职场总结》:http://blog.jobbole.com/94148/

③ 最后请附上您的个人简介哈~




觉得本文对你有帮助?请分享给更多人

关注「前端大全」,提升前端技能

    您可能也对以下帖子感兴趣

    文章有问题?点此查看未经处理的缓存