我觉得我们还是有必要积极关注并勇敢地加以实

时间:2019-10-08 20:37来源:计算机论坛
采纳h5新特征,轻巧监听别的App自带重回键 2018/07/03 · HTML5 ·H5 原稿出处:云叔_又拍云    运用html5新特点轻巧监听别的App自带重返键的事必躬亲,html5app 1、前言 前日h5新特征、新标签

采纳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.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 收藏 评论

图片 1

编辑:计算机论坛 本文来源:我觉得我们还是有必要积极关注并勇敢地加以实

关键词: