h5新特性的用法:监听App自带的返回键


本文摘自PHP中文网,作者不言,侵删。

这篇文章给大家介绍的文章内容是关于使用h5新特性,轻松监听任何App自带返回键,有很好的参考价值,希望可以帮助到有需要的朋友。

1、前言

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

2、起因

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

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

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

1

2

3

4

5

6

7

8

9

10

11

pushHistory();

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

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

}, false);

function pushHistory() {

    var state = {

        title: "title",

        url: "#"

    };

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

}

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

1

2

3

4

5

6

7

8

9

10

11

12

13

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+了,所以遇到该问题只要想办法兼容它就好了。

阅读剩余部分

相关阅读 >>

javascript如何实现弹出层效果?(代码分析)

html关于结构语义化的问题

vue-cli 3.x 自动部署项目至服务器的方法介绍(代码)

html图片不滚动怎么设置

面试常问之javascript变量提升

javascript是什么技术

h5开发视频遇到的问题及解决方案

javascript输出语句怎么打

详解7款绚丽的jquery/html5动画及源码

html sub标签怎么用

更多相关阅读请进入《javascript》频道 >>




打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,您说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

分享从这里开始,精彩与您同在

评论

管理员已关闭评论功能...