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

作者: 前端应用  发布:2019-09-15

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

粗粗6个月前接受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等都以都市版了,该属性超越50%安卓机都能辨识,个人风尚版安卓机非常的小概识别,原因在于navigator.userAgent内核版本过低,chrome以往无数是64+了,所以蒙受该难题若是想艺术同盟它就好了。

并非说真的能够透过JS监听到顾客对App里的自带重返键的直白操作,以至安卓的物理再次来到键,而是通过变化思路,火速完结必要。希望以此性子能帮到各位。

1 赞 1 收藏 评论

图片 1

本文由今晚买四不像发布于前端应用,转载请注明出处:轻松监听任何App自带返回键,使用html5新特性轻松

关键词: