菜单

动用h5新特性,轻松监听其他App自带重回键

2019年1月1日 - JavaScript

2、起因

大致半年前收到pm一要求,用纯h5落实多audio的播报、暂停、续播,页面放至驾考宝典App中,与客户端从未其余的互相,所以与客户端相关的js不需要引用。看上去这要求挺简单的嘛,即使此前也没做过类似的需要。不管三七二十一,撸起袖子就是干。起首了就学之旅。

2、起因

粗粗半年前接收pm一需要,用纯h5实现多audio的播音、暂停、续播,页面放至驾考宝典App中,与客户端从未另外的相互,所以与客户端相关的js不需要引用。看上去这需要挺简单的嘛,尽管事先也没做过类似的要求。不管三七二十一,撸起袖子就是干。先导了读书之旅。


1、前言

现行h5新特性、新标签、新规范等有好多,而且正在不断完善中,各大浏览器商对它们的援助,也是一对一给力。作为前端程序员,我以为我们还是有必要积极关注并勇敢地加以实施。接下来我将和各位分享一个专程好用的h5新特征(近年来也不是特意新),轻松监听其他App自带的再次回到键,包括安卓机里的物理重临键,从而实现项目开支中愈发的急需。

1、前言

前些天h5新特点、新标签、新规范等有无数,而且正在不断完善中,各大浏览器商对它们的支撑,也是一对一给力。作为前端程序员,我认为我们还是有必不可少积极关注并勇敢地加以实施。接下来我将和各位分享一个专程好用的h5新特色(最近也不是专程新),轻松监听其他App自带的再次来到键,包括安卓机里的物理重临键,从而实现项目开发中更是的要求。


行使h5新特点,轻松监听其他App自带重返键

2018/07/03 · HTML5 ·
H5

原稿出处:
云叔_又拍云   

3、我那里关键介绍下我具体是怎么监听其他App自带的再次来到键,以及安卓机里的物理重回键。


那干什么我要去监听呢,这里自己有必要强调强调再强调。苹果手机无论是微信、QQ、App,依旧浏览器里,涉及到audio、video,再次回到上一页系统会自动刹车当前的播放的,但不是颇具安卓机都得以。所以我们友好必须自定义监听。很多情人或者首先设法就是百度,然后出去的答案无非是如此

图片 1

是不是很掌握?然则首要需求不可能系数兑现,要这段代码有何用,当时自家也是绞尽脑汁。直到通过大神好友指点,复制了这段代码

图片 2

富有题目迎刃而解。

这段代码的规律我个人了解就是经过判断用户浏览的是不是为当前页,从而举行连锁操作。

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

并不是说现在着实可以通过JS监听到App里的自带重临键,甚至安卓的物理重临键,而是经过转变思路,迅速实现需求。希望这几个特点能帮到各位。

4、手机兼容性

一目领会现在的安卓机系统4.0等都是低配版了,该属性大部分安卓机都能鉴别,个人低配版安卓机不可以辨别,原因在于navigator.userAgent内核版本过低,chrome现在广大是64+了,所以碰着该问题假设想艺术配合它就好了。

并不是说真的可以通过JS监听到用户对App里的自带重返键的平素操作,甚至安卓的物理再次来到键,而是通过变更思路,急忙实现需求。希望以此特性能帮到各位。

1 赞 1 收藏
评论

图片 3

3、我这边关键介绍下自己实际是怎么监听其他App自带的重回键,以及安卓机里的物理再次回到键。

这干什么我要去监听呢,这里自己有必要强调强调再强调。苹果手机无论是微信、QQ、App,依旧浏览器里,涉及到audio、video,重临上一页系统会自行刹车当前的播放的,但不是具备安卓机都得以。所以我们友好必须自定义监听。很多情人或者首先想方设法就是百度,然后出去的答案无非是如此

pushHistory(); window.add伊芙(Eve)ntListener(“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
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.add伊夫(Eve)ntListener(visibilityChange伊夫nt, onVisibilityChange);

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…

相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图