使用h5新特性,轻松监听任何App自带返回键
2018-03-14 11:31
435 查看
1、前言如今h5新特性、新标签、新规范等有很多,而且正在不断完善中,各大浏览器商对它们的支持,也是相当给力。作为前端程序员,我觉得我们还是有必要积极关注并勇敢地加以实践。接下来我将和各位分享一个特别好用的h5新特性(目前也不是特别新),轻松监听任何App自带的返回键,包括安卓机里的物理返回键,从而实现项目开发中进一步的需求。2、起因大概半年前接到pm一需求,用纯h5实现多audio的播放、暂停、续播,页面放至驾考宝典App中,与客户端没有任何的交互,所以与客户端相关的js不需要引用。看上去这需求挺简单的嘛,虽然之前也没做过类似的需求。不管三七二十一,撸起袖子就是干。开始了学习之旅。3、我这里着重介绍下我具体是怎么监听任何App自带的返回键,以及安卓机里的物理返回键。那为什么我要去监听呢,这里我有必要强调强调再强调。苹果手机不管是微信、QQ、App,还是浏览器里,涉及到audio、video,返回上一页系统会自动暂停当前的播放的,但不是所有安卓机都可以。所以我们自己必须自定义监听。很多朋友可能第一想法就是百度,然后出来的答案无非是这样
这段代码的原理我个人理解就是通过判断用户浏览的是否为当前页,从而进行相关操作。
这是 MDN相关链接:https://developer.mozilla.org...。
原文链接:https://segmentfault.com/a/1190000013700474
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...。
原文链接:https://segmentfault.com/a/1190000013700474
相关文章推荐
- 使用h5新特性,轻松监听任何App自带返回键
- iOS与H5交互 H5与App原生交互,一般会是前端页面中的JavaScript与App使用的原生开发语言的交互。技术方案应能达到以下要求: 在js与原生进行交互的时候能保证正常的正向调用逻辑返回
- H5APP中监听返回事件处理
- 使用registerActivityLifecycleCallbacks实现整个app所有activity生命周期的监听和处理
- 使用charles对app请求进行抓包,请求断点,修改请求与返回的数据,重新发送请求
- 使用struts2自带的json包返回JSON
- app使用微信支付成功后,点击返回到该app却跳到另外一个app去了
- APP中的 H5和原生页面如何分辨、何时使用
- ASP.NET2.0中轻松实现网站换肤(App_Themes的使用)
- android 监听当前页返回键回到桌面,再次点击app回到当前页
- 监听微信、支付宝等移动app及浏览器的返回、后退、上一页按钮的事件方法
- H5特性 MutationObserver 监听元素 动态改变iframe高度
- 如何捕获微信自带的返回键监听
- 使用iOS AirPrint 让你的APP轻松实现打印功能
- 使用Fiddler监听手机App访问的API
- 安卓APP使用H5弹出ALERT 支持JS
- linux网络监控工具---系统自带的工具的使用示例(可以监控经过本局域网的任何数据,并可以打印到屏幕或者日志文件)
- iOS11新特性之在你的APP中使用LargeTitle
- 轻松实现Fragment监听返回键,回退ViewPager双击退出
- H5+APP监听安卓物理返回键