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


Posted in HTML / CSS onMarch 13, 2018

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/zh-CN/docs/Web/API/Document/hidden

并不是说真的可以通过JS监听到App里的自带返回键,甚至安卓的物理返回键,而是通过转变思路,快速实现需求。希望这个特性能帮到各位。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

HTML / CSS 相关文章推荐
CSS3中动画属性transform、transition和animation属性的区别
Sep 25 HTML / CSS
CSS中几个与换行有关的属性简明总结
Apr 15 HTML / CSS
CSS3 Columns分列式布局方法简介
May 03 HTML / CSS
利用CSS3实现进度条的两种姿势详解
Mar 21 HTML / CSS
css3 transform导致子元素固定定位变成绝对定位的方法
Mar 06 HTML / CSS
CSS3 box-shadow属性实例详解
Jun 19 HTML / CSS
利用HTML5+css3+jquery+weui实现仿微信聊天界面功能
Jan 08 HTML / CSS
html5 worker 实例(二) 图片变换效果
Jun 24 HTML / CSS
HTML5的download属性详细介绍和使用实例
Apr 23 HTML / CSS
Application Cache未缓存文件无法访问无法加载问题
May 31 HTML / CSS
Canvas系列之滤镜效果
Feb 12 HTML / CSS
Html5 video标签视频的最佳实践
Feb 26 HTML / CSS
配置H5的滚动条样式的示例代码
Mar 09 #HTML / CSS
Canvas制作旋转的太极的示例
Mar 09 #HTML / CSS
详解px单位html5响应式方案
Mar 08 #HTML / CSS
html5开发三八女王节表白神器
Mar 07 #HTML / CSS
使用HTML5和CSS3制作一个模态框的示例
Mar 07 #HTML / CSS
Canvas制作的下雨动画的示例
Mar 06 #HTML / CSS
html2canvas把div保存图片高清图的方法示例
Mar 05 #HTML / CSS
You might like
php设计模式 Facade(外观模式)
2011/06/26 PHP
最新用php获取谷歌PR值算法,附上php查询PR值代码示例
2011/12/25 PHP
深入PHP magic quotes的详解
2013/06/17 PHP
fckeditor上传文件按日期存放及重命名方法
2015/05/22 PHP
thinkphp整合系列之极验滑动验证码geetest功能
2019/06/18 PHP
强悍无比的WEB开发好助手FireBug(Firefox Plugin)
2007/01/16 Javascript
javascript setTimeout()传递函数参数(包括传递对象参数)
2010/04/07 Javascript
用jquery模仿的a的title属性(兼容ie6/7)
2013/01/21 Javascript
html+css+js实现xp window界面及有关功能
2013/03/26 Javascript
javascript页面上使用动态时间具体实现
2014/03/18 Javascript
通过JQuery将DIV的滚动条滚动到指定的位置方便自动定位
2014/05/05 Javascript
一个可以增加和删除行的table并可编辑表格中内容
2014/06/16 Javascript
两种方法基于jQuery实现IE浏览器兼容placeholder效果
2014/10/14 Javascript
angular.js中解决跨域问题的三种方式
2017/07/12 Javascript
webpack分离css单独打包的方法
2018/06/12 Javascript
在小程序开发中使用npm的方法
2018/10/17 Javascript
JavaScript函数式编程(Functional Programming)纯函数用法分析
2019/05/22 Javascript
javascript获取元素的计算样式
2019/05/24 Javascript
封装微信小程序http拦截器过程解析
2019/08/13 Javascript
VsCode里的Vue模板的实现
2020/08/12 Javascript
[04:39]显微镜下的DOTA2第十三期—Pis卡尔个人秀
2014/04/04 DOTA
在Python的Django框架中实现Hacker News的一些功能
2015/04/17 Python
python执行等待程序直到第二天零点的方法
2015/04/23 Python
Python paramiko模块的使用示例
2018/04/11 Python
在Django model中设置多个字段联合唯一约束的实例
2019/07/17 Python
Pytoch之torchvision.transforms图像变换实例
2019/12/30 Python
pycharm 2019 最新激活方式(pycharm破解、激活)
2020/09/22 Python
利用Python如何实时检测自身内存占用
2020/05/09 Python
django ORM之values和annotate使用详解
2020/05/19 Python
ShellScript面试题一则-ShellScript编程
2014/03/05 面试题
销售人员中英文自荐信
2013/09/22 职场文书
酒店管理专业毕业生推荐信
2013/11/10 职场文书
《圆明园的毁灭》教学反思
2014/02/28 职场文书
个人对照检查材料思想汇报
2014/09/26 职场文书
如何书写授权委托书?
2019/06/25 职场文书
SpringBoot整合RabbitMQ的5种模式实战
2021/08/02 Java/Android