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

 Web前端     |      2019-11-15 18:44

行使h5新特点,轻便监听别的App自带重临键

2018/07/03 · HTML5 · H5

初藳出处: 云叔_又拍云   

1、前言

于今h5新特色、新标签、新规范等有广大,并且正在不断完备中,各大浏览器商对它们的支撑,也是非常给力。作为前端技士,小编觉着大家依旧有供给积极关心并大胆地加以施行。接下来笔者将和各位分享一个专程好用的h5新特性(最近亦非特意新卡塔尔,轻巧监听其余App自带的再次回到键,包罗安卓机里的物理再次来到键,进而完毕项目支出中进一层的须要。

2、起因

大意八个月前收到pm生机勃勃须要,用纯h5贯彻多audio的播报、暂停、续播,页面放至驾考宝典App中,与客户端从未其余的并行,所以与顾客端相关的js无需引用。看上去那供给挺轻松的嘛,尽管事先也没做过相通的需求。不管三七七十后生可畏,撸起袖子正是干。起先了就学之旅。

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.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

上一篇:没有了 下一篇:API制作web通知的教程