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

动用h5新特色,轻松监听其余App自带再次来到键

2018/07/03 · HTML5 ·
H5

原稿出处:
云叔_又拍云   

运用html5新特征轻松监听别的App自带再次来到键的以身作则,html5app

1、前言

近日h5新特征、新标签、新规范等有许多,而且正在不断完善中,各大浏览器商对它们的匡助,也是一定给力。作为前端程序员,俺觉着我们如故有必不可少积极关怀并大胆地加以实施。接下来小编将和各位分享1个特别好用的h5新特点(如今也不是专门新),轻松监听其余App自带的再次来到键,包含安卓机里的物理重临键,从而达成项目支付中进一步的须要。

2、起因

粗粗5个月前接收pm一须求,用纯h5兑现多audio的播音、暂停、续播,页面放至驾考宝典App中,与客户端从未别的的互相,所以与客户端相关的js不供给引用。看上去那须要挺不难的呗,即便事先也没做过类似的要求。不管三七二十一,撸起袖子正是干。起头了学习之旅。

三 、笔者那里首要介绍下自个儿实际是怎么监听别的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里的自带再次回到键,甚至安卓的物理再次来到键,而是通过变更思路,快速完成必要。希望以此性格能帮到各位。

如上便是本文的全部内容,希望对我们的求学抱有协助,也可望大家多多支持帮客之家。

① 、前言
最近h5新特点、新标签、新专业等有许多,而且正在不断完善中,各大浏…

1、前言

未来h5新特点、新标签、新规范等有诸多,而且正在不断完善中,各大浏览器商对它们的支撑,也是一对一给力。作为前端程序员,作者认为大家依然有供给积极关心并勇于地加以实施。接下来我将和各位分享2个尤其好用的h5新特色(近日也不是专门新),轻松监听其余App自带的再次回到键,包括安卓机里的物理重回键,从而落成项目支出中愈发的需要。

2、起因

大概四个月前接受pm一要求,用纯h5贯彻多audio的播放、暂停、续播,页面放至驾考宝典App中,与客户端从未别的的相互,所以与客户端相关的js不须要引用。看上去那供给挺简单的嘛,固然事先也没做过类似的要求。不管三七二十一,撸起袖子就是干。初始了深造之旅。