行使h5新特点,轻易监听别的App自带再次来到键

2018/07/03 · HTML5 ·
H5

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

采纳html5新特征轻易监听其余App自带重返键的示范,html5app

永利开户送38元体验金,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", "#"); 
}

是否很了然?可是关键供给不能够周密兑现,要这段代码有什么用,当时自家也是搜索枯肠。直到通过大神基友辅导,复制了这段代码

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相关链接:

并非说真的能够透过JS监听到App里的自带重返键,以致安卓的物理重临键,而是经过转移思路,快捷完结须要。希望这一个特点能帮到各位。

以上便是本文的全体内容,希望对大家的就学抱有帮衬,也期望大家多多帮衬帮客之家。

1、前言
近来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.add伊芙ntListener(visibilityChange伊夫nt, 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 收藏
评论

永利开户送38元体验金 1

相关文章