选用h5新特色,轻巧监听其余App自带再次来到键

2018/07/03 · HTML5 ·
H5

原来的书文出处:
云叔_又拍云   

1、前言

今昔h5新特点、新标签、新标准等有不菲,何况正在不断康健中,各大浏览器商对它们的支撑,也是意气风发对生龙活虎给力。作为前端程序猿,作者以为我们照旧有不可紧缺积极关切并勇敢地加以实施。接下来小编将和各位共享一个专程好用的h5新特色(前段时间亦不是特意新),轻松监听别的App自带的再次回到键,包蕴安卓机里的物理重返键,进而完毕项目开辟中愈发的须要。


1、前言

今昔h5新特色、新标签、新标准等有广大,而且正在不断完善中,各大浏览器商对它们的支撑,也是意气风发对生机勃勃给力。作为前端技师,笔者以为我们依然有非常重要积极关心并勇敢地加以施行。接下来作者将和各位分享三个极其好用的h5新特点(近些日子亦非特地新),轻巧监听别的App自带的重回键,满含安卓机里的物理重回键,进而完成项目支付中愈发的须要。

2、起因

大要5个月前接纳pm风流倜傥需要,用纯h5兑现多audio的播放、暂停、续播,页面放至驾考宝典App中,与顾客端从未此外的竞相,所以与客商端相关的js不必要援用。看上去那必要挺轻易的嘛,纵然在此之前也没做过相通的必要。不管三七四十风华正茂,撸起袖子正是干。带头了读书之旅。


2、起因

乐百家loo777,大概四个月前接到pm意气风发须求,用纯h5落成多audio的广播、暂停、续播,页面放至驾考宝典App中,与客户端从未其余的并行,所以与客商端相关的js无需援引。看上去那须求挺轻便的呗,尽管事先也没做过肖似的要求。不管三七七十意气风发,撸起袖子就是干。初叶了学习之旅。

3、作者那边最首要介绍下小编具体是怎么监听其余App自带的重临键,以致安卓机里的物理重临键。


那怎么小编要去监听呢,这里自身有须求强调重申再重申。苹果手提式有线电话机无论是微信、QQ、App,依旧浏览器里,涉及到audio、video,重回上生龙活虎页系统会活动制动踏板当前的播报的,但不是有着安卓机都足以。所以大家和睦必需自定义监听。非常多恋人恐怕首先主见就是百度,然后出来的答案无非是那般

乐百家loo777 1

是或不是很熟练?但是主要须求不能够圆满兑现,要这段代码有啥用,那个时候本身也是大费周折。直到通过大神好友指点,复制了这段代码

乐百家loo777 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.add伊夫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…。

4、手提式有线电话机宽容性

综上可得今后的安卓机系统4.0等都以尊享型了,该属性超越四分之二安卓机都能辨别,个人高配版安卓机无法辨别,原因在于navigator.userAgent内核版本过低,chrome将来众多是64+了,所以境遇该难题假若想艺术合营它就好了。

并非说实话能够通过JS监听到客商对App里的自带重返键的直接操作,以致安卓的物理重返键,而是经过退换思路,连忙完结须求。希望那个特点能帮到各位。

1 赞 1 收藏
评论

乐百家loo777 3

相关文章