使用html5新特性轻松监听任何App自带返回键的示例

作者: 前端技术  发布:2019-09-17

使用h5新特征,轻便监听其余App自带再次回到键

2018/07/03 · HTML5 · H5

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

动用html5新本性轻易监听别的App自带重临键的演示,html5app

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、起因

大略5个月前收到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(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

本文由今晚开什么码发布于前端技术,转载请注明出处:使用html5新特性轻松监听任何App自带返回键的示例

关键词:

上一篇:没有了
下一篇:没有了