使用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模拟jq点击事件的实例代码
Jul 06 HTML / CSS
css3弹性盒模型实例介绍
May 27 HTML / CSS
浅析rem和em和px vh vw和% 移动端长度单位
Apr 28 HTML / CSS
详解CSS 3 中的 calc() 方法
Jan 12 HTML / CSS
解决margin 外边距合并问题
Jul 03 HTML / CSS
CSS3 按钮边框动画的实现
Nov 12 HTML / CSS
html5指南-5.使用web storage存储键值对的数据
Jan 07 HTML / CSS
将HTML5 Canvas的内容保存为图片借助toDataURL实现
May 20 HTML / CSS
canvas线条的属性详解
Mar 27 HTML / CSS
HTML5自定义元素播放焦点图动画的实现
Sep 25 HTML / CSS
使用iframe+postMessage实现页面跨域通信的示例代码
Jan 14 HTML / CSS
详解CSS不受控制的position fixed
May 25 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递归遍历多维数组的方法
2015/04/18 PHP
PHP-FPM实现性能优化
2016/03/31 PHP
yii框架搜索分页modle写法
2016/12/19 PHP
简单谈谈 php 文件锁
2017/02/19 PHP
Laravel中前端js上传图片到七牛云的示例代码
2017/09/04 PHP
PHP常量DIRECTORY_SEPARATOR原理及用法解析
2020/11/10 PHP
jquery cookie插件代码类
2009/05/26 Javascript
控制页面按钮在后台执行期间不重复提交的JS方法
2013/06/24 Javascript
JS实现鼠标滑过链接改变网页背景颜色的方法
2015/10/20 Javascript
Bootstrap每天必学之简单入门
2015/11/19 Javascript
基于javascript实现tab切换特效
2016/03/29 Javascript
jQuery将表单序列化成一个Object对象的实例
2016/11/29 Javascript
vue.js element-ui validate中代码不执行问题解决方法
2017/12/18 Javascript
详解封装基础的angular4的request请求方法
2018/06/05 Javascript
Javascript实现一朵从含苞到绽放的玫瑰
2019/03/30 Javascript
layui实现左侧菜单点击右侧内容区显示
2019/07/26 Javascript
详解如何在JS代码中消灭for循环
2019/12/11 Javascript
node.js爬虫框架node-crawler初体验
2020/10/29 Javascript
python实现查询苹果手机维修进度
2015/03/16 Python
itchat和matplotlib的结合使用爬取微信信息的实例
2017/08/25 Python
scrapy spider的几种爬取方式实例代码
2018/01/25 Python
python如何派生内置不可变类型并修改实例化行为
2018/03/21 Python
python抓取网页内容并进行语音播报的方法
2018/12/24 Python
python3爬虫学习之数据存储txt的案例详解
2019/04/24 Python
Python分布式进程中你会遇到的问题解析
2019/05/28 Python
python检查目录文件权限并修改目录文件权限的操作
2020/03/11 Python
python中wx模块的具体使用方法
2020/05/15 Python
关于css中margin的值和垂直外边距重叠问题
2020/10/27 HTML / CSS
标准毕业生自荐信
2014/06/24 职场文书
教师师德师风个人整改方案
2014/09/18 职场文书
公安四风对照检查材料思想汇报
2014/10/11 职场文书
2014年高数考试作弊检讨书
2014/12/14 职场文书
小学生勤俭节约倡议书
2015/04/29 职场文书
Python快速优雅的批量修改Word文档样式
2021/05/20 Python
python如何查找列表中元素的位置
2022/05/30 Python
Spring中bean集合注入的方法详解
2022/07/07 Java/Android