使用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 相关文章推荐
CSS的pointer-events属性详细介绍(作用和注意事项)
Apr 23 HTML / CSS
CSS3区域模块region相关编写示例
Aug 28 HTML / CSS
CSS3中的@keyframes关键帧动画的选择器绑定
Jun 13 HTML / CSS
CSS3利用text-shadow属性实现多种效果的文字样式展现方法
Aug 25 HTML / CSS
css3实现动画的三种方式
Aug 24 HTML / CSS
Html5页面在微信端的分享的实现方法
Aug 30 HTML / CSS
HTML5的结构和语义(5):内嵌媒体
Oct 17 HTML / CSS
HTML5之SVG 2D入门9—蒙板及mask元素介绍与应用
Jan 30 HTML / CSS
微信小程序之html5 canvas绘图并保存到系统相册
Jun 20 HTML / CSS
canvas实现滑动验证的实现示例
Aug 11 HTML / CSS
浅谈由position属性引申的css进阶讨论
May 25 HTML / CSS
HTML5来实现本地文件读取和写入的实现方法
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
用文本文件制作留言板提示(上)
2006/10/09 PHP
PHP 上传文件大小限制
2009/07/05 PHP
php通过文件头检测文件类型通用代码类(zip,rar等)
2010/10/19 PHP
php xml 入门学习资料
2011/01/01 PHP
PHP fopen 读取带中文URL地址的一点见解
2012/09/25 PHP
ThinkPHP的URL重写问题
2014/06/22 PHP
PHP中require和include路径问题详解
2014/12/25 PHP
php将文本文件转换csv输出的方法
2014/12/31 PHP
php计算两个日期相差天数的方法
2015/03/14 PHP
Yii 2.0实现联表查询加搜索分页的方法示例
2017/08/02 PHP
js event事件的传递与冒泡处理
2009/12/06 Javascript
aspx中利用js实现确认删除代码
2010/07/22 Javascript
利用原生JavaScript获取元素样式只是获取而已
2014/10/08 Javascript
jQuery checkbox选中问题之prop与attr注意点分析
2016/11/15 Javascript
js实现界面向原生界面发消息并跳转功能
2016/11/22 Javascript
vue+AI智能机器人回复功能实现
2020/07/16 Javascript
解决vuex刷新数据消失问题
2020/11/12 Javascript
Vue项目如何引入bootstrap、elementUI、echarts
2020/11/26 Vue.js
[47:39]2018DOTA2亚洲邀请赛 3.31 小组赛 A组 LGD vs OPTIC
2018/03/31 DOTA
Python自动连接ssh的方法
2015/03/07 Python
Python+树莓派+YOLO打造一款人工智能照相机
2018/01/02 Python
PyQt5每天必学之滑块控件QSlider
2018/04/20 Python
python将数组n等分的实例
2019/12/02 Python
python scrapy重复执行实现代码详解
2019/12/28 Python
python GUI库图形界面开发之PyQt5中QWebEngineView内嵌网页与Python的数据交互传参详细方法实例
2020/02/26 Python
Python datetime 格式化 明天,昨天实例
2020/03/02 Python
Python使用Matlab命令过程解析
2020/06/04 Python
深入浅析Python代码规范性检测
2020/07/31 Python
纽约通行卡:The New York Pass(免费游览纽约90多个景点)
2017/07/29 全球购物
android面试问题与答案
2016/12/27 面试题
就业自我评价
2014/02/04 职场文书
班班通项目实施方案
2014/02/25 职场文书
测绘工程专业求职信
2014/07/15 职场文书
党员倡议书
2015/01/19 职场文书
幼儿园园长个人总结
2015/03/02 职场文书
利用javaScript处理常用事件详解
2021/04/14 Javascript