使用h5新特征,轻易监听其余App自带重返键

2018/07/03 · HTML5 ·
H5

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

1、前言

今昔h5新特点、新标签、新规范等有为数不菲,並且正在不断康健中,各大浏览器商对它们的支撑,也是一定给力。作为前端技师,笔者以为大家依旧有不能缺少积极关心并勇敢地加以施行。接下来笔者将和各位分享叁个专程好用的h5新特色(前段时间亦不是特意新卡塔尔,轻巧监听别的App自带的重临键,包罗安卓机里的物理重返键,进而落成项目支出中愈发的须求。


1、前言

现行反革命h5新特色、新标签、新专门的学业等有无数,并且正在不断完善中,各大浏览器商对它们的协助,也是一定给力。作为前端技师,小编感觉我们依然有要求积极关怀并大胆地加以试行。接下来小编将和各位共享叁个极度好用的h5新特征(近日亦非特地新卡塔 尔(阿拉伯语:قطر‎,轻巧监听其余App自带的重返键,满含安卓机里的物理重回键,进而达成项目开销中尤为的急需。

2、起因

大约四个月前接到pm风流倜傥急需,用纯h5达成多audio的广播、暂停、续播,页面放至驾考宝典App中,与客商端从未别的的人机联作,所以与客商端相关的js无需引用。看上去那须要挺轻易的嘛,尽管事先也没做过相通的必要。不管三七七十风流倜傥,撸起袖子就是干。开头了深造之旅。


2、起因

粗粗八个月前选择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

相关文章