使用html5新特性轻松监听任何App自带返回键的示例
分类:前端操作

应用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(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新特性轻松监听任何App自带返回键的示例

上一篇:没有了 下一篇:没有了
猜你喜欢
热门排行
精彩图文