>

轻松监听任何App自带返回键

- 编辑:至尊游戏网站 -

轻松监听任何App自带返回键

接纳h5新特征,轻巧监听别的App自带再次来到键

2018/07/03 · HTML5 · H5

原作出处: 云叔_又拍云   

1、前言

到现在h5新特色、新标签、新标准等有相当多,何况正在不断完善中,各大浏览器商对它们的扶助,也是一对一给力。作为前端程序猿,笔者以为大家依然有不可或缺积极关注并大胆地加以实践。接下来作者将和各位分享二个特意好用的h5新特点(方今亦不是特别新),轻便监听别的App自带的重临键,蕴涵安卓机里的物理重临键,进而实现项目开拓中国和越南社会主义共和国发的供给。

2、起因

粗粗七个月前接收pm一须要,用纯h5兑现多audio的播放、暂停、续播,页面放至驾考宝典App中,与顾客端从未任何的相互,所以与客商端相关的js没有供给援用。看上去这须求挺轻易的呗,即便事先也没做过类似的要求。不管三七二十一,撸起袖子正是干。开端了上学之旅。

3、小编这里首要介绍下本身实际是怎么监听别的App自带的再次回到键,以至安卓机里的物理重临键。

那为何自个儿要去监听呢,这里本人有须求重申重申再强调。苹果手提式有线电话机无论是微信、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.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 收藏 评论

图片 1

本文由门户名站发布,转载请注明来源:轻松监听任何App自带返回键