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);所有问题迎刃而解。
这段代码的原理我个人理解就是通过判断用户浏览的是否为当前页,从而进行相关操作。
4、手机兼容性
众所周知现在的安卓机系统4.0等都是低配版了,该属性大部分安卓机都能识别,个人低配版安卓机无法识别,原因在于navigator.userAgent内核版本过低,chrome现在很多是64+了,所以遇到该问题只要想办法兼容它就好了。
并不是说真的可以通过JS监听到用户对App里的自带返回键的直接操作,甚至安卓的物理返回键,而是通过转变思路,快速实现需求。希望这个特性能帮到各位。

猜你喜欢
联络方式:
深圳 · 龙岗 · 大运软件小镇22栋302-308
电话:400 1828 580
邮箱:szhulian@qq.com



-
我们能改变一个项目,却改变不了弱于后端这个事实
做过web开发的程序员朋友都知道,一般都是分前端开发工程师和后端开发工程师,一般很少有前后端通吃的全栈工程师,前端工程师与后端工程师职责分工都是相当明确的,近几年都是采取前后端完全分离的技术...
-
“微盟删库“事件探讨银行数据安全保护技术
截止到3月1日晚8点,在腾讯云团队协助下,经过7*24小时的努力,数据已经全面找回……3月2日凌晨2点进行系统上线演练,将于3月3日上午9点数据恢复正式上线……
-
花钱都买不到网站建设的原则盘点
网站是企业与用户第一接触的地方,一个企业的网络营销之路的基础就是网站。就如同万丈高楼一样,没有好的地基是无法建立万丈高楼的。想要在互联网上获得很好的营销效果...
-
【通知】2021年元旦放假通知
根据《国务院办公厅关于2021年部分节假日安排的通知》的相关规定,结合深圳市大运软件小镇内部相关规定及深正互联具体的情况2021年元旦假期安排如下:
-
微信小程序如何利益化?
小程序上线之后,小程序的商业化、变现是一个十分现实的问题,也是大家一直高度关注的问题。那么不同类型的小程序要怎么实现自己的小程序变现呢?