1、前言

如今h5新特性、新标签、新规范等有很多,而且正在不断完善中,各大浏览器商对它们的支持,也是相当给力。作为前端程序员,我觉得我们还是有必要积极关注并勇敢地加以实践。接下来我将和各位分享一个特别好用的h5新特性(目前也不是特别新),轻松监听任何App自带的返回键,包括安卓机里的物理返回键,从而实现项目开发中进一步的需求。

2、起因

大概半年前接到pm一需求,用纯h5实现多audio的播放、暂停、续播,页面放至驾考宝典App中,与客户端没有任何的交互,所以与客户端相关的js不需要引用。看上去这需求挺简单的嘛,虽然之前也没做过类似的需求。不管三七二十一,撸起袖子就是干。开始了学习之旅。

3、我这里着重介绍下我具体是怎么监听任何App自带的返回键,以及安卓机里的物理返回键。

那为什么我要去监听呢,这里我有必要强调强调再强调。苹果手机不管是微信、QQ、App,还是浏览器里,涉及到audio、video,返回上一页系统会自动暂停当前的播放的,但不是所有安卓机都可以。所以我们自己必须自定义监听。很多朋友可能第一想法就是百度,然后出来的答案无非是这样

  1. pushHistory();
  2. window.addEventListener("popstate", function(e) {
  3. alert("我监听到了浏览器的返回按钮事件啦");//根据自己的需求实现自己的功能
  4. }, false);
  5. function pushHistory() {
  6. var state = {
  7. title: "title",
  8. url: "#"
  9. };
  10. window.history.pushState(state, "title", "#");
  11. }

是不是很眼熟?然而关键需求不能完美实现,要这段代码有何用,当时我也是绞尽脑汁。直到经过大神好友指导,复制了这段代码

  1. var hiddenProperty = 'hidden' in document ? 'hidden' :
  2. 'webkitHidden' in document ? 'webkitHidden' :
  3. 'mozHidden' in document ? 'mozHidden' :
  4. null;
  5. var visibilityChangeEvent = hiddenProperty.replace(/hidden/i, 'visibilitychange');
  6. var onVisibilityChange = function(){
  7. if (document[hiddenProperty]) {
  8. console.log('页面非激活');
  9. }else{
  10. console.log('页面激活')
  11. }
  12. }
  13. document.addEventListener(visibilityChangeEvent, onVisibilityChange);

所有问题迎刃而解。
这段代码的原理我个人理解就是通过判断用户浏览的是否为当前页,从而进行相关操作。
这是 MDN相关链接:https://developer.mozilla.org...

4、手机兼容性

众所周知现在的安卓机系统4.0等都是低配版了,该属性大部分安卓机都能识别,个人低配版安卓机无法识别,原因在于navigator.userAgent内核版本过低,chrome现在很多是64+了,所以遇到该问题只要想办法兼容它就好了。

并不是说真的可以通过JS监听到用户对App里的自带返回键的直接操作,甚至安卓的物理返回键,而是通过转变思路,快速实现需求。希望这个特性能帮到各位。

使用h5新特性,轻松监听任何App自带返回键的更多相关文章

  1. 使用 h5 新特性,轻松监听任何 App 自带返回键

    var hiddenProperty = 'hidden' in document ? 'hidden' : 'webkitHidden' in document ? 'webkitHidden' : ...

  2. [转]html5监听任何App自带返回键javascript事件

    1.前言 如今h5新特性.新标签.新规范等有很多,而且正在不断完善中,各大浏览器商对它们的支持,也是相当给力.作为前端程序员,我觉得我们还是有必要积极关注并勇敢地加以实践.接下来我将和各位分享一个特别 ...

  3. js监听手机端点击物理返回键或js监听pc端点击浏览器返回键

    之前在项目中遇到一个问题,就是在微信网页上面本来是有返回按钮的,但是大多数人都为了方便,会使用安卓手机自带的物理返回键,这个返回键按下后,就会按照你浏览器的栈存储的路径来一层一层返回,就不执行你页面上 ...

  4. H5新特性--WebStorage--WebSocke

    今天的目标 3.2:h5新特性--WebStorage localStorage  在客户端浏览器保存数据 永久保存 保存数据 localStorage [key] = value 保存数据 loca ...

  5. H5新特性——--第三方绘图工具库 echarts(canvas)---SVG绘图

    今天学习的内容 3.1:h5新特性---第三方绘图工具库 echarts(canvas) 百度 echarts;d3;two.js;.... 3.2:h5新特性---SVG绘图 3.2:h5新特性-- ...

  6. H5新特性汇总

    H5新特性: 新增选择器 document.querySelector.document.querySelectorAll 拖拽释放(Drag and drop) API 媒体播放的 video 和 ...

  7. 移动端H5页面惯性滑动监听

    移动端H5页面惯性滑动监听 在移动端,当你快速滑动有滚动条的页面时,当你手指离开屏幕时,滚动条并不会立即停止,而是会随着"惯性"继续滑动一段距离. 在做项目的过程中,需要监听惯性滑 ...

  8. H5新特性---Web Worker---Web Stroage

    今天的目标 3.1:h5新特性八--Web Worker---代码就3行 程序:program 存储在外存(磁盘)中代码 进程:Process/Task 将程序调用内存中,分配空间 线程:Thread ...

  9. H5新特性---SVG--椭圆--直线--文本--滤镜(高斯滤镜--模糊)--地理定位

    今天的目标 3.1:h5新特性--SVG--椭圆 <ellipse rx="" ry=""  cx="" cy="" ...

随机推荐

  1. Golang 单例模式 singleton pattern

    在Java中,单例模式的实现主要依靠类中的静态字段.在Go语言中,没有静态类成员,所以我们使用的包访问机制和函数来提供类似的功能.来看下下面的例子: package singleton         ...

  2. AE调用GP工具(创建缓冲区和相交为例)

    引用 Geoprocessing是ArcGIS提供的一个非常实用的工具,借由Geoprocessing工具可以方便的调用ArcToolBox中提供的各类工具,本文在ArcEngine9.2平台环境下总 ...

  3. 【MapReduce】一、MapReduce简介与实例

    (一)MapReduce介绍 1.MapReduce简介   MapReduce是Hadoop生态系统的一个重要组成部分,与分布式文件系统HDFS.分布式数据库HBase一起合称为传统Hadoop的三 ...

  4. C学习笔记-typedef

    typedef是一种高级数据特性,它能使某一类型创建自己的名字 typedef unsigned char BYTE; typedef struct man MAN; BYTE b = 0x12; 与 ...

  5. flask_sqlalchemy基本设置

    from flask import Flask from flask_sqlalchemy import SQLAlchemy #区别 sqlalchemy这是第三方模块不属于flask app = ...

  6. PTA(Basic Level)1029.旧键盘

    旧键盘上坏了几个键,于是在敲一段文字的时候,对应的字符就不会出现.现在给出应该输入的一段文字.以及实际被输入的文字,请你列出肯定坏掉的那些键. 输入格式: 输入在 2 行中分别给出应该输入的文字.以及 ...

  7. NLP自然语言处理中英文分词工具集锦与基本使用介绍

    一.中文分词工具 (1)Jieba (2)snowNLP分词工具 (3)thulac分词工具 (4)pynlpir 分词工具 (5)StanfordCoreNLP分词工具 1.from stanfor ...

  8. Spring Boot+CXF搭建WebService服务参考资料

    pom.xml文件引入包: <!--WerbService CXF依赖--> <dependency> <groupId>org.apache.cxf</gr ...

  9. 从入门到自闭之Python三大器--生成器

    1.什么是生成器 核心:生成器的本质就是一个迭代器 迭代器是python自带的的 生成器是程序员自己写的一种迭代器 编写方式: 基于函数编写 推导式编写 def func (): print(&quo ...

  10. Dubbo消费方服务调用过程源码分析

    参考:dubbo消费方服务调用过程源码分析dubbo基于spring的构建分析Dubbo概述--调用过程dubbo 请求调用过程分析dubbo集群容错机制代码分析1dubbo集群容错策略的代码分析2d ...