使用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的Media Queries(跨平台设计)
Jul 27 HTML / CSS
CSS3中使用RGBa来调节透明度的教程
May 09 HTML / CSS
CSS3实现点击放大的动画实例代码
Feb 27 HTML / CSS
css3旋转木马_动力节点Java学院整理
Jul 12 HTML / CSS
html5指南-2.如何操作document metadata
Jan 07 HTML / CSS
HTML5资源预加载(Link prefetch)详细介绍(给你的网页加速)
May 07 HTML / CSS
让IE下支持Html5的placeholder属性的插件
Sep 02 HTML / CSS
简单整理HTML5的基本特性和语法
Feb 18 HTML / CSS
详解html5 shiv.js和respond.min.js
Jan 24 HTML / CSS
如何给HTML标签中的文本设置修饰线
Nov 18 HTML / CSS
background-position百分比原理详解
May 08 HTML / CSS
html中相对位置与绝对位置的具体使用
May 15 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语法(2)
2006/10/09 PHP
使用 MySQL Date/Time 类型
2008/03/26 PHP
PHP中time(),date(),mktime()区别介绍
2013/09/28 PHP
php获取指定(访客)IP所有信息(地址、邮政编码、国家、经纬度等)的方法
2015/07/06 PHP
PHP如何使用Memcached
2016/04/05 PHP
php断点续传之文件分割合并详解
2016/12/13 PHP
ExtJS Store的数据访问与更新问题
2010/04/28 Javascript
Array的push与unshift方法性能比较分析
2011/03/05 Javascript
jQuery筛选器children()案例详解(图文)
2013/02/17 Javascript
js阻止冒泡及jquery阻止事件冒泡示例介绍
2013/11/19 Javascript
谷歌地图打不开的解决办法
2014/08/07 Javascript
浅析$(function) ready和onload 的区别
2016/09/03 Javascript
微信js-sdk上传与下载图片接口用法示例
2016/10/12 Javascript
AngularJS点击添加样式、点击变色设置的实例代码
2017/07/27 Javascript
微信h5静默和非静默授权获取用户openId的方法和步骤
2020/06/08 Javascript
前端使用crypto.js进行加密的函数代码
2020/08/16 Javascript
[36:33]2018DOTA2亚洲邀请赛 4.3 突围赛 EG vs Newbee 第二场
2018/04/04 DOTA
跟老齐学Python之玩转字符串(1)
2014/09/14 Python
python中MySQLdb模块用法实例
2014/11/10 Python
python 给DataFrame增加index行名和columns列名的实现方法
2018/06/08 Python
python实现随机梯度下降法
2020/03/24 Python
python打印直角三角形与等腰三角形实例代码
2019/10/20 Python
利用Python的sympy包求解一元三次方程示例
2019/11/22 Python
Python通过两个dataframe用for循环求笛卡尔积
2020/04/29 Python
工程造价管理专业大专生求职信
2013/10/06 职场文书
客户服务经理岗位职责
2014/01/29 职场文书
秘书英文求职信范文
2014/01/31 职场文书
大学生学年自我鉴定
2014/02/10 职场文书
《商鞅南门立木》教学反思
2014/02/16 职场文书
升旗仪式主持词
2014/03/19 职场文书
法律进社区实施方案
2014/03/21 职场文书
合作协议书范本
2014/10/25 职场文书
新员工入职欢迎词
2015/01/23 职场文书
2016年春季趣味运动会开幕词
2016/03/04 职场文书
go语言map与string的相互转换的实现
2021/04/07 Golang
vue elementUI表格控制对应列
2022/04/13 Vue.js