韦德国际1946英国 > 计算机网络 > 计算机网络:使用html5新特性轻松监听任何App自带

原标题:计算机网络:使用html5新特性轻松监听任何App自带

浏览次数:200 时间:2019-04-18

选拔h伍新特色,轻易监听其余App自带再次回到键

2018/07/03 · HTML5 · H5

原来的作品出处: 云叔_又拍云   

计算机网络,应用html5新特点轻易监听其余App自带重回键的言传身教,html5app

1、前言

近来h五新特点、新标签、新规范等有不少,而且正在不断完善中,各大浏览器商对它们的接济,也是一定给力。作为前端程序员,小编感到大家依然有须求积极关怀并勇敢地加以实行。接下来小编将和各位分享三个越来越好用的h5新特征(近年来也不是专门新),轻便监听其余App自带的再次回到键,包涵安卓机里的物理重临键,从而达成项目开销中更是的要求。

2、起因

约略七个月前接收pm壹供给,用纯h5兑现多audio的播放、暂停、续播,页面放至驾考宝典App中,与客户端从未其他的互相,所以与客户端相关的js不须求引用。看上去那供给挺轻松的呗,即使事先也没做过类似的急需。不管三7二拾壹,撸起袖子正是干。起首了上学之旅。

三、笔者那里关键介绍下笔者具体是怎么监听其他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新特征、新标签、新专业等有成都百货上千,而且正在不断完善中,各大浏...

三、作者那边境海关键介绍下自个儿实际是怎么监听其余App自带的再次回到键,以及安卓机里的物理再次回到键。


那为何本人要去监听呢,这里笔者有要求重申重申再重申。苹果手提式无线电话机无论是微信、QQ、App,依旧浏览器里,涉及到audio、video,重临上一页系统会活动刹车当前的播报的,但不是独具安卓机都能够。所以大家本身必须自定义监听。多数仇人可能率先设法正是百度,然后出来的答案无非是这么

计算机网络 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…。

2、起因

差不多5个月前接收pm壹须要,用纯h五达成多audio的播音、暂停、续播,页面放至驾考宝典App中,与客户端从未别的的交互,所以与客户端相关的js不要求引用。看上去这须要挺轻便的呗,即便事先也没做过类似的供给。不管3柒二拾壹,撸起袖子正是干。伊始了上学之旅。


本文由韦德国际1946英国发布于计算机网络,转载请注明出处:计算机网络:使用html5新特性轻松监听任何App自带

关键词: 日记本 Web前端之路 HTML5

上一篇:适配方法,适配手机端

下一篇:没有了