太阳集团游戏官方网站 3

太阳集团游戏官方网站轻松监听任何App自带返回键

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

2018/07/03 · HTML5 ·
H5

原稿出处:
云叔_又拍云   

1、前言

现行反革命h5新特性、新标签、新专门的学业等有无数,并且正在不断完备中,各大浏览器商对它们的扶助,也是卓殊给力。作为前端程序猿,笔者以为大家还是有至关重大积极关切并大胆地加以奉行。接下来笔者将和各位分享贰个专程好用的h5新特色(近年来亦不是特意新卡塔 尔(英语:State of Qatar),轻便监听其余App自带的重临键,满含安卓机里的物理再次回到键,进而落成项目开拓中更为的要求。


1、前言

今天h5新特色、新标签、新规范等有超多,况且正在不断完备中,各大浏览器商对它们的支撑,也是非凡给力。作为前端程序猿,作者以为我们如故有不可或缺积极关切并勇于地加以试行。接下来小编将和各位分享三个特别好用的h5新特点(前段时间亦非特意新卡塔尔国,轻巧监听别的App自带的重回键,包罗安卓机里的物理重临键,进而实现项目支付中更为的必要。

2、起因

大致5个月前接受pm生龙活虎须要,用纯h5兑现多audio的播音、暂停、续播,页面放至驾考宝典App中,与客商端从未别的的互相,所以与客商端相关的js不须求援引。看上去那须要挺轻松的呗,纵然事先也没做过肖似的要求。不管三七四十意气风发,撸起袖子正是干。早先了深造之旅。


2、起因

大意7个月前收到pm意气风发须要,用纯h5落到实处多audio的播报、暂停、续播,页面放至驾考宝典App中,与客商端从未任何的互相,所以与顾客端相关的js无需引用。看上去这供给挺简单的呗,就算事先也没做过相近的急需。不管三七二十生机勃勃,撸起袖子就是干。开端了就学之旅。

3、作者这里关键介绍下自家切实是怎么监听别的App自带的再次来到键,甚至安卓机里的物理重临键。


那干什么本人要去监听呢,这里自身有必要重申重申再重申。苹果手提式有线电话机无论是Wechat、QQ、App,仍旧浏览器里,涉及到audio、video,重临上黄金年代页系统会自动制动踏板当前的播放的,但不是具备安卓机都得以。所以大家温馨必得自定义监听。相当多朋友或许首先设法正是百度,然后出去的答案无非是这么

太阳集团游戏官方网站 1

是或不是很熟习?但是重视需要不可能到家兑现,要这段代码有啥用,当时本人也是心劳计绌。直到通过大神亲密的朋友教导,复制了这段代码

太阳集团游戏官方网站 2

装有标题化解。

这段代码的规律小编个人驾驭就是通过判定顾客浏览的是或不是为当前页,进而实行连锁操作。

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

并非说以往实在能够通过JS监听到App里的自带重返键,以至安卓的物理重回键,而是经过转变思路,火速达成必要。希望那个特点能帮到各位。

3、小编这里关键介绍下自家切实是怎么监听其余App自带的重返键,以至安卓机里的物理重返键。

那干什么本身要去监听呢,这里自身有无法贫乏重申重申再重申。苹果手提式有线电话机无论是Wechat、QQ、App,依旧浏览器里,涉及到audio、video,重临上大器晚成页系统会自行制动踏板当前的播放的,但不是颇有安卓机都能够。所以大家和睦必需自定义监听。比很多情侣或然首先化尽心血就是百度,然后出去的答案无非是这么

pushHistory(); window.add伊芙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伊芙ntListener(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

发表评论

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