使用h5新特性,轻松监听任何App自带返回键

新澳门萄京娱乐场官网 1

新澳门萄京娱乐场官网,利用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.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 收藏
评论

新澳门萄京娱乐场官网 1

发表评论

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