使用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做的动态时钟效果
Sep 21 HTML / CSS
两种CSS3伪类选择器详细介绍
Dec 24 HTML / CSS
分享一个页面平滑滚动小技巧(推荐)
Oct 23 HTML / CSS
基于HTML5 WebGL的3D机房的示例
Mar 16 HTML / CSS
HTML5 新表单类型示例代码
Mar 20 HTML / CSS
html5 canvas的绘制文本自动换行的示例代码
Sep 17 HTML / CSS
HTML5实现签到 功能
Oct 09 HTML / CSS
解析浏览器的一些“滚动”行为鉴赏
Sep 16 HTML / CSS
video.js支持m3u8格式直播的实现示例
May 20 HTML / CSS
Html5新增了哪些功能
Apr 16 HTML / CSS
html粘性页脚的具体使用
Jan 18 HTML / CSS
使用CSS实现音波加载效果
May 07 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+ajax分页实例简析
2015/12/07 PHP
yii实现model添加默认值的方法(2种方法)
2016/01/06 PHP
PHP命名空间定义与用法实例分析
2019/08/14 PHP
基于Jquery的简单&简陋Tabs插件代码
2010/02/09 Javascript
ExtJs中简单的登录界面制作方法
2010/08/19 Javascript
关于onScroll事件在IE6下每次滚动触发三次bug说明
2011/09/21 Javascript
『jQuery』.html(),.text()和.val()的概述及使用
2013/04/22 Javascript
jQuery遍历Form示例代码
2013/09/03 Javascript
下拉列表选择项的选中在不同浏览器中的兼容性问题探讨
2013/09/18 Javascript
js定时器怎么写?就是在特定时间执行某段程序
2013/10/11 Javascript
jquery简单实现幻灯片的方法
2015/08/03 Javascript
jQuery+json实现动态创建复杂表格table的方法
2016/10/25 Javascript
浅谈angularjs中响应回车事件
2017/04/24 Javascript
深入浅析Node.js 事件循环、定时器和process.nextTick()
2018/10/22 Javascript
浅谈KOA2 Restful方式路由初探
2019/03/14 Javascript
JavaScript Math对象和调试程序的方法分析
2019/05/13 Javascript
vue使用websocket的方法实例分析
2019/06/22 Javascript
Vue项目打包部署到apache服务器的方法步骤
2021/02/01 Vue.js
[36:16]完美世界DOTA2联赛PWL S3 access vs Rebirth 第一场 12.19
2020/12/24 DOTA
Python标准库之循环器(itertools)介绍
2014/11/25 Python
Python实现过滤单个Android程序日志脚本分享
2015/01/16 Python
matplotlib中legend位置调整解析
2017/12/19 Python
Python学习笔记之函数的参数和返回值的使用
2019/11/20 Python
canvas绘制视频封面的方法
2018/02/05 HTML / CSS
纽约家具、家居装饰和地毯店:ABC Carpet & Home
2017/06/21 全球购物
保加利亚运动鞋购物网站:SneakerStudio.bg
2020/12/23 全球购物
广告学专业应届生求职信
2013/10/01 职场文书
如何掌握自荐信格式呢
2013/11/19 职场文书
电子工程求职信
2014/07/17 职场文书
校长创先争优承诺书
2014/08/30 职场文书
单位租房协议书样本
2014/10/30 职场文书
个人催款函范文
2015/06/24 职场文书
政协常委会议主持词
2015/07/03 职场文书
2016大学生诚信考试承诺书
2016/03/25 职场文书
Java实现斗地主之洗牌发牌
2021/06/14 Java/Android
Oracle表空间与权限的深入讲解
2021/11/17 Oracle