摘要：前言如今新特性新标签新规范等有很多，而且正在不断完善中，各大浏览器商对它们的支持，也是相当给力。接下来我将和各位分享一个特别好用的新特性目前也不是特别新，轻松监听任何自带的返回键，包括安卓机里的物理返回键，从而实现项目开发中进一步的需求。
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相关链接:https://developer.mozilla.org...。
众所周知现在的安卓机系统4.0等都是低配版了，该属性大部分安卓机都能识别，个人低配版安卓机无法识别，原因在于navigator.userAgent内核版本过低，chrome现在很多是64+了，所以遇到该问题只要想办法兼容它就好了。
并不是说真的可以通过JS监听到用户对App里的自带返回键的直接操作，甚至安卓的物理返回键，而是通过转变思路，快速实现需求。希望这个特性能帮到各位。
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/51976.html
摘要：前言如今新特性新标签新规范等有很多，而且正在不断完善中，各大浏览器商对它们的支持，也是相当给力。接下来我将和各位分享一个特别好用的新特性目前也不是特别新，轻松监听任何自带的返回键，包括安卓机里的物理返回键，从而实现项目开发中进一步的需求。 1、前言 如今h5新特性、新标签、新规范等有很多，而且正在不断完善中，各大浏览器商对它们的支持，也是相当给力。作为前端程序员，我觉得我们还是有必要积...
摘要：前言如今新特性新标签新规范等有很多，而且正在不断完善中，各大浏览器商对它们的支持，也是相当给力。接下来我将和各位分享一个特别好用的新特性目前也不是特别新，轻松监听任何自带的返回键，包括安卓机里的物理返回键，从而实现项目开发中进一步的需求。 1、前言 如今h5新特性、新标签、新规范等有很多，而且正在不断完善中，各大浏览器商对它们的支持，也是相当给力。作为前端程序员，我觉得我们还是有必要积...
摘要：前段时间面试过程中，频繁遇到异步文件上传的相关问题。所以，这会是一个拖放接口实现文件异步上传的完整。监听放置元素的事件，通过对象可以获得拖拽事件的状态及数据。后端文件接收保存后端使用实现文件上传。 前段时间面试过程中，频繁遇到H5异步文件上传的相关问题。还遇到过一个通过H5拖放功能实现文件异步上传的问题，大概知道H5有新增拖拽功能可以接收文件，如何异步上传文件就母鸡了(摊手)。面试...
摘要：前段时间面试过程中，频繁遇到异步文件上传的相关问题。所以，这会是一个拖放接口实现文件异步上传的完整。监听放置元素的事件，通过对象可以获得拖拽事件的状态及数据。后端文件接收保存后端使用实现文件上传。 前段时间面试过程中，频繁遇到H5异步文件上传的相关问题。还遇到过一个通过H5拖放功能实现文件异步上传的问题，大概知道H5有新增拖拽功能可以接收文件，如何异步上传文件就母鸡了(摊手)。面试...
摘要：大家好，我来自驾考宝典。同时，我在驾考宝典也工作一年多了。驾考宝典算不上一线大公司，但我个人不管是通过工作，平常的积累，还是自主学习，我觉得还是能和大家分享一些更加实战化的面试题。并处理好广大安卓机的兼容性。 大家好，我来自驾考宝典。时间不知不觉进入2018金九银十，下半年的尾声了，想必很多朋友已经看过网上新出的各大厂面试题。同时，我在驾考宝典也工作一年多了。驾考宝典算不上一线大公司，...
阅读 3234·2021-09-22 10:52
阅读 1412·2021-09-09 09:34
阅读 1711·2021-09-09 09:33
阅读 570·2019-08-30 15:54
阅读 2389·2019-08-29 11:15
阅读 608·2019-08-26 13:37
阅读 1543·2019-08-26 12:11
阅读 2849·2019-08-26 12:00
