首页

当前位置:永利皇宫463登录 > 首页 > 轻松监听任何App自带返回键,使用html5新特性轻松

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

来源:http://www.makebuLuo.com 作者:永利皇宫463登录 时间:2019-09-16 13:45

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

大意四个月前接收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 收藏 评论

永利皇宫463登录 1

本文由永利皇宫463登录发布于首页,转载请注明出处:轻松监听任何App自带返回键,使用html5新特性轻松

关键词: