使用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 3D立方体效果示例-transform也不过如此
Dec 05 HTML / CSS
使用css3匹配手机屏幕横竖状态
Jan 27 HTML / CSS
CSS3的column-fill属性对齐列内容高度的用法详解
Jul 01 HTML / CSS
5分钟让你掌握css3阴影、倒影、渐变小技巧(小编推荐)
Aug 15 HTML / CSS
css3实现六边形边框的实例代码
May 24 HTML / CSS
Html5之svg可缩放矢量图形_动力节点Java学院整理
Jul 17 HTML / CSS
HTML5 解析规则分析
Aug 14 HTML / CSS
HTML5之HTML元素扩展(上)—新增加的元素及使用概述
Jan 31 HTML / CSS
深入解析HTML5中的Blob对象的使用
Sep 08 HTML / CSS
浅析HTML5中的download属性使用
Mar 13 HTML / CSS
html+css实现赛博朋克风格按钮
May 26 HTML / CSS
CSS实现切角+边框+投影+内容背景色渐变效果
Nov 01 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/03/16 PHP
php断点续传之文件分割合并详解
2016/12/13 PHP
用jquery来定位
2007/02/20 Javascript
JQuery DataTable删除行后的页面更新利用Ajax解决
2013/05/17 Javascript
js加载读取内容及显示与隐藏div示例
2014/02/13 Javascript
js触发select onchange事件的小技巧
2014/08/05 Javascript
原生Js实现简易烟花爆炸效果的方法
2015/03/20 Javascript
jQuery实现内容定时切换效果完整实例
2016/04/06 Javascript
JS实时弹出新消息提示框并有提示音响起的实现代码
2016/04/20 Javascript
JavaScript高仿支付宝倒计时页面及代码实现
2016/10/21 Javascript
javascript数组去重常用方法实例分析
2017/04/11 Javascript
基于vue2.0实现的级联选择器
2017/06/09 Javascript
关于vue的语法规则检测报错问题的解决
2018/05/21 Javascript
详解vue项目中调用百度地图API使用方法
2019/04/25 Javascript
JS如何生成动态列表
2020/09/22 Javascript
python元组操作实例解析
2014/09/23 Python
浅析Python中的赋值和深浅拷贝
2017/08/15 Python
python+pandas+时间、日期以及时间序列处理方法
2018/07/10 Python
python编写猜数字小游戏
2019/10/06 Python
Python类继承和多态原理解析
2020/02/05 Python
python Protobuf定义消息类型知识点讲解
2021/03/02 Python
意大利体育用品和运动服网上商店:Maxi Sport
2019/09/14 全球购物
市政管理求职信范文
2014/05/07 职场文书
财务审计整改报告
2014/11/06 职场文书
2015年数学教研组工作总结
2015/05/23 职场文书
2015年小学教导处工作总结
2015/05/26 职场文书
运动会加油稿30字
2015/07/21 职场文书
女方家长婚礼致辞
2015/07/27 职场文书
毕业生求职自荐信(2016最新版)
2016/01/28 职场文书
2016年万圣节活动个人总结
2016/04/05 职场文书
jquery插件实现代码雨特效
2021/04/24 jQuery
健身房被搭讪?用python写了个小米计时器助人为乐
2021/06/08 Python
PHP使用QR Code生成二维码实例
2021/07/07 PHP
Oracle锁表解决方法的详细记录
2022/06/05 Oracle
windows server 2012安装FTP并配置被动模式指定开放端口
2022/06/10 Servers