189 8069 5689
这篇文章主要为大家展示了“如何使用html5新特性监听任何App自带返回键”，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下“如何使用html5新特性监听任何App自带返回键”这篇文章吧。
成都创新互联公司-专业网站定制、快速模板网站建设、高性价比宝山网站开发、企业建站全套包干低至880元,成熟完善的模板库,直接使用。一站式宝山网站制作公司更省心,省钱,快速模板网站建设找我们，业务覆盖宝山地区。费用合理售后完善，十载实体公司更值得信赖。
1、前言
如今h6新特性、新标签、新规范等有很多，而且正在不断完善中，各大浏览器商对它们的支持，也是相当给力。作为前端程序员，我觉得我们还是有必要积极关注并勇敢地加以实践。接下来我将和各位分享一个特别好用的h6新特性（目前也不是特别新），轻松监听任何App自带的返回键，包括安卓机里的物理返回键，从而实现项目开发中进一步的需求。
2、起因
大概半年前接到pm一需求，用纯h6实现多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相关链接:https://developer.mozilla.org/zh-CN/docs/Web/API/Document/hidden
并不是说真的可以通过JS监听到App里的自带返回键，甚至安卓的物理返回键，而是通过转变思路，快速实现需求。
以上是“如何使用html5新特性监听任何App自带返回键”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注创新互联行业资讯频道！