动用html5新天性轻便监听其余App自带再次回到键的演示,轻便监听其余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不供给引用。看上去那需求挺轻巧的呗,尽管以前也没做过类似的急需。不管三七二十一,撸起袖子就是干。初叶了就学之旅。

发表评论

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

网站地图xml地图