澳门金莎娱乐网站使用html5新特性轻松监听任何

时间:2019-10-04 14:48来源:网页制作
行使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、起因

大致7个月前接到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.addEventListener(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新特性轻松监听任何

关键词:

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