使用h伍新特点,轻便监听其余App自带重返键

2018/07/03 · HTML5 ·
H5

原稿出处:
云叔_又拍云   

行使html5新天性轻易监听其余App自带重临键的演示,html5app

1、前言

近年来h5新特点、新标签、新专门的学问等有大多,而且正在不断完善中,各大浏览器商对它们的支撑,也是一定给力。作为前端技术员,笔者认为大家照旧有须求积极关心并大胆地加以施行。接下来作者将和各位分享二个特意好用的h5新天性(近年来也不是特地新),轻易监听别的App自带的重返键,包含安卓机里的物理再次来到键,从而完毕项目支出中进一步的必要。

2、起因

大致四个月前接收pm一须求,用纯h五兑现多audio的播音、暂停、续播,页面放至驾考宝典App中,与客户端从未其余的交互,所以与客户端相关的js不须求引用。看上去那须求挺轻巧的嘛,即便以前也没做过类似的要求。不管37二10一,撸起袖子正是干。起首了上学之旅。

叁、小编那边最首要介绍下笔者具体是怎么监听其余App自带的再次回到键,以及安卓机里的物理重临键。

那怎么作者要去监听呢,那里小编有须要重申重申再重申。苹果手提式有线电话机无论是微信、QQ、App,仍然浏览器里,涉及到audio、video,重回上1页系统会自动刹车当前的播报的,但不是享有安卓机都得以。所以我们和好必须自定义监听。很多爱人概率先设法就是百度,然后出来的答案无非是如此

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新特点、新标签、新专门的学问等有广大,而且正在不断完善中,各大浏览器商对它们的支撑,也是格外给力。作为前端技术员,作者感到我们仍然有须要积极关切并大胆地加以实施。接下来作者将和各位分享1个特意好用的h伍新特色(目前也不是特地新),轻松监听别的App自带的再次回到键,包涵安卓机里的物理重返键,从而完毕项目支出中国和越南社会主义共和国来越的须要。


1、前言

当今h5新特点、新标签、新标准等有那个,而且正在不断完善中,各大浏览器商对它们的支撑,也是一对壹给力。作为前端技术员,小编感到大家依旧有不可或缺积极关切并勇敢地加以施行。接下来小编将和各位分享八个特地好用的h伍新特色(近期也不是尤其新),轻便监听别的App自带的再次来到键,包罗安卓机里的物理再次回到键,从而完成项目支出中特别的供给。

2、起因

大概3个月前接受pm一要求,用纯h五贯彻多audio的播放、暂停、续播,页面放至驾考宝典App中,与客户端从未任何的互相,所以与客户端相关的js不必要引用。看上去这须求挺轻巧的嘛,即便事先也没做过类似的供给。不管叁七二拾一,撸起袖子正是干。开首了深造之旅。


2、起因

大要7个月前收到pm一急需,用纯h5落到实处多audio的播报、暂停、续播,页面放至驾考宝典App中,与客户端从未别的的相互,所以与客户端相关的js不需求引用。看上去那须求挺轻巧的嘛,就算事先也没做过类似的必要。不管叁柒二拾一,撸起袖子正是干。开首了上学之旅。

三、作者那边根本介绍下自家切实是怎么监听其余App自带的重临键,以及安卓机里的物理再次回到键。


那为啥自个儿要去监听呢,那里作者有不能缺少重申重申再重申。苹果手提式有线电话机无论是微信、QQ、App,依然浏览器里,涉及到audio、video,重回上1页系统会自行刹车当前的广播的,但不是全数安卓机都能够。所以大家协和必须自定义监听。大多敌人概率先想方设法便是百度,然后出去的答案无非是那样

必发娱乐官方网站 1

是或不是很熟习?不过主要要求不可能圆满兑现,要那段代码有什么用,当时本身也是狼狈周章。直到通过大神好友指点,复制了这段代码

必发娱乐官方网站 2

富有标题一挥而就。

那段代码的法则笔者个人通晓正是通过决断用户浏览的是否为当前页,从而实行相关操作。

这是
MDN相关链接:https://developer.mozilla.org/zh-CN/docs/Web/API/Document/hidden。

并不是说未来确实可以经过JS监听到App里的自带重返键,以致安卓的物理重回键,而是通过更动思路,连忙完结必要。希望以此性子能帮到各位。

三、笔者那边最首要介绍下自个儿实际是怎么监听别的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(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…。

肆、手机包容性

分明未来的安卓机系统四.0等都以高配版了,该属性当先3/6安卓机都能辨别,个人都市版安卓机不可能分辨,原因在于navigator.userAgent内核版本过低,chrome今后无数是64+了,所以蒙受该难题就算想办法合营它就好了。

并不是说真的可以由此JS监听到用户对App里的自带再次来到键的直白操作,乃至安卓的物理重返键,而是通过变化思路,快捷完毕必要。希望以此特性能帮到各位。

1 赞 1 收藏
评论

必发娱乐官方网站 3

Author

发表评论

电子邮件地址不会被公开。 必填项已用*标注