使用h5新特性,轻松监听任何App自带返回键
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、手机兼容性
众所周知现在的安卓机系统4.0等都是低配版了,该属性大部分安卓机都能识别,个人低配版安卓机无法识别,原因在于navigator.userAgent内核版本过低,chrome现在很多是64+了,所以遇到该问题只要想办法兼容它就好了。
并不是说真的可以通过JS监听到用户对App里的自带返回键的直接操作,甚至安卓的物理返回键,而是通过转变思路,快速实现需求。希望这个特性能帮到各位。
使用h5新特性,轻松监听任何App自带返回键的更多相关文章
- 使用 h5 新特性,轻松监听任何 App 自带返回键
var hiddenProperty = 'hidden' in document ? 'hidden' : 'webkitHidden' in document ? 'webkitHidden' : ...
- [转]html5监听任何App自带返回键javascript事件
1.前言 如今h5新特性.新标签.新规范等有很多,而且正在不断完善中,各大浏览器商对它们的支持,也是相当给力.作为前端程序员,我觉得我们还是有必要积极关注并勇敢地加以实践.接下来我将和各位分享一个特别 ...
- js监听手机端点击物理返回键或js监听pc端点击浏览器返回键
之前在项目中遇到一个问题,就是在微信网页上面本来是有返回按钮的,但是大多数人都为了方便,会使用安卓手机自带的物理返回键,这个返回键按下后,就会按照你浏览器的栈存储的路径来一层一层返回,就不执行你页面上 ...
- H5新特性--WebStorage--WebSocke
今天的目标 3.2:h5新特性--WebStorage localStorage 在客户端浏览器保存数据 永久保存 保存数据 localStorage [key] = value 保存数据 loca ...
- H5新特性——--第三方绘图工具库 echarts(canvas)---SVG绘图
今天学习的内容 3.1:h5新特性---第三方绘图工具库 echarts(canvas) 百度 echarts;d3;two.js;.... 3.2:h5新特性---SVG绘图 3.2:h5新特性-- ...
- H5新特性汇总
H5新特性: 新增选择器 document.querySelector.document.querySelectorAll 拖拽释放(Drag and drop) API 媒体播放的 video 和 ...
- 移动端H5页面惯性滑动监听
移动端H5页面惯性滑动监听 在移动端,当你快速滑动有滚动条的页面时,当你手指离开屏幕时,滚动条并不会立即停止,而是会随着"惯性"继续滑动一段距离. 在做项目的过程中,需要监听惯性滑 ...
- H5新特性---Web Worker---Web Stroage
今天的目标 3.1:h5新特性八--Web Worker---代码就3行 程序:program 存储在外存(磁盘)中代码 进程:Process/Task 将程序调用内存中,分配空间 线程:Thread ...
- H5新特性---SVG--椭圆--直线--文本--滤镜(高斯滤镜--模糊)--地理定位
今天的目标 3.1:h5新特性--SVG--椭圆 <ellipse rx="" ry="" cx="" cy="" ...
随机推荐
- Python爬虫学习==>第八章:Requests库详解
学习目的: request库比urllib库使用更加简洁,且更方便. 正式步骤 Step1:什么是requests requests是用Python语言编写,基于urllib,采用Apache2 Li ...
- 联想H430怎么清除cmos密码?
联想H430怎么清除cmos密码? 方法一:长时间对cmos放电 首先断掉主机电源,然后找到主板上的纽扣电池,将电池小心取出,然后使用一金属导体,短接电池座中的正负极,这样也可达到快速放电的目的. 有 ...
- 【转载】深度学习中softmax交叉熵损失函数的理解
深度学习中softmax交叉熵损失函数的理解 2018-08-11 23:49:43 lilong117194 阅读数 5198更多 分类专栏: Deep learning 版权声明:本文为博主原 ...
- [python] 执行 dos 命令
python的os模块 os模块调用CMD命令有两种方式:os.popen(),os.system(). 都是用当前进程来调用. os.system是无法获取返回值的.当运行结束后接着往下面执行程序. ...
- 在Ubuntu上安装Hive
1.下载hive2.3.5 解压缩并改名为hive目录,放到/usr/local下(注意权限) sudo mv apache-hive-2.3.5-bin /usr/local/hive 2.修改目录 ...
- 【C++ 补习】Copy Control
C++ Primer 5th edition, chapter 13. The Rule of Three If a class needs a destructor, it almost surel ...
- java 8 date time 简单样例
参考 Java 8 Time Api 使用指南-珍藏限量版 Java 8 中处理日期和时间示例 部分样例 import java.time.temporal.TemporalAdjusters; im ...
- python网络爬虫(3)python爬虫遇到的各种问题(python版本、进程等)
import urllib2 源地址 在python3.3里面,用urllib.request代替urllib2 import urllib.request as urllib2 import coo ...
- intelij IDEA设置goole code style风格
1.安装google-java-format 插件 file ->Setings... ->pligins 输入上诉插件安装 2.下载IntelliJ Java Goog ...
- numpy:np.random.seed()
np.random.seed()函数可以保证生成的随机数具有可预测性. 可以使多次生成的随机数相同 1.如果使用相同的seed( )值,则每次生成的随即数都相同: 2.如果不设置这个值,则系统根据时间 ...