菜单

下h5新特性,轻松监听其他App自带回到回键

2018年11月15日 - Html/Html5

使用h5新特征,轻松监听其他App自带回去回键

2018/07/03 · HTML5 ·
H5

初稿出处:
云叔_又拍云   

1、前言

现在h5新特性、新标签、新专业等发生很多,而且正在不断完善中,各大浏览器商对她的支撑,也是一对一给力。作为前端程序员,我看咱们尚是生必不可少积极关注并勇于地加以实施。接下来我用同各位分享一个专程好用的h5新特性(目前呢未是特意新),轻松监听其他App自带的返回键,包括安卓机里之物理返回键,从而实现种开支被愈发的需。


1、前言

现今h5新特色、新标签、新规范等来过多,而且正不断完善中,各大浏览器商对她的支持,也是相当给力。作为前端程序员,我觉着咱们尚是发出必要积极关注并大胆地加以实施。接下来我用与各位分享一个特意好用的h5新特色(目前也未是特地新),轻松监听其他App自带的返回键,包括安卓机里之物理返回键,从而实现项目开被尤其的要求。

2、起因

大致半年前接到pm一需求,用纯h5实现多audio的广播、暂停、续播,页面放至驾考宝典App中,与客户端从未外的竞相,所以跟客户端相关的js不待引用。看上去就需要非常简单的嘛,虽然之前为从来不做过类似的求。不管三七二十一,撸起袖子就是涉及。开始了深造的同。


2、起因

粗粗半年前收到pm一求,用纯h5贯彻多audio的播放、暂停、续播,页面放至驾考宝典App中,与客户端从未其他的互,所以与客户端相关的js不欲引用。看上去就要求大简单的嘛,虽然事先为尚无做了类似之急需。不管三七二十一,撸起袖子就是涉嫌。开始了读书之同。

3、我这里根本介绍下自家切实是怎监听其他App自带的返回键,以及安卓机里的物理返回键。


那为什么自己若错过监听呢,这里我生必要强调强调还强调。苹果手机无论是微信、QQ、App,还是浏览器里,涉及到audio、video,返回上等同页系统会活动刹车当前底播报的,但切莫是有安卓机都可以。所以我们友好要由定义监听。很多冤家可能首先想方设法就是是百度,然后下的答案就是这样

图片 1

凡无是格外熟知?然而关键需求不可知全面兑现,要就段代码来哪里用,当时本身吧是煞费苦心。直到通过大神好友点,复制了及时段代码

图片 2

享有问题迎刃而解。

旋即段代码的规律我个人掌握就是经过判断用户浏览的是否也当前页,从而进行相关操作。

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

并无是说现在确实可以经JS监听到App里之自带返回键,甚至安卓底物理返回键,而是通过变化思路,快速实现需求。希望这特点能协助到各位。

3、我这边关键介绍下我具体是怎监听其他App自带的返回键,以及安卓机里之物理返回键。

这就是说怎么我而失去监听呢,这里自己来必不可少强调强调还强调。苹果手机无论是微信、QQ、App,还是浏览器里,涉及到audio、video,返回上同页系统会自行刹车当前底播音的,但无是负有安卓机都得以。所以我们好必须于定义监听。很多爱人或者率先设法就是百度,然后出去的答案就是这般

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
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);

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+了,所以遇到拖欠问题而想方配合它就好了。

并无是说确可以经过JS监听到用户对App里之自带返回键的直操作,甚至安卓底物理返回键,而是经过转移思路,快速实现需求。希望以此特性能协助到各位。

1 赞 1 收藏
评论

图片 3

相关文章

发表评论

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

网站地图xml地图