这个是今天刚发现的,想起之前那个在页面用video标签视频播放,别人切换页面后仍在继续播放,体验很不好,用这个API就可以很完美的解决。

Page Visibility API 可以让你获取到这种状态。在用户使用切换标签的方式来浏览网页时,非常合理的情况是任何在后台页面都不会展示给用户。 当用户最小化网页或者浏览到其他标签的网页时,API将发送一个关于当前页面的可见信息的事件visibilitychange。你可以检测该事件然后执行一些活动或是展示不同的效果。比如,如果你的网站app正在播放一个视频,也许当用户浏览其他浏览器时它可以暂停,那么当用户切换回来的时候,就可以继续播放了。用户可以继续观看,不会因为浏览其他的浏览器导致丢失当前视频的进度。

1、document.hidden

为布尔值,页面隐藏状态时返回true,否则返回false

2、document.visibilityState

顾名思义就是状态:

visible : 页面内容至少是部分可见。 在实际中,这意味着页面是非最小化窗口的前景选项卡;

hidden : 页面内容对用户不可见。 在实际中,这意味着文档可以是一个后台标签,或是最小化窗口的一部分,或是在操作系统锁屏激活的状态下;

prerender : 页面内容正在被预渲染且对用户是不可见的(被document.hidden当做隐藏). 文档可能初始状态为prerender,但绝不会从其它值转为该值。 注释:浏览器支持是可选的;

unloaded : 页面正在从内存中卸载。 注释:浏览器支持是可选的。

一般我们主要也就用到前两个

举一个非常简单的例子

 document.addEventListener("visibilitychange",function () {
console.log(document.hidden)
})

在游览器标签切换一下我们会发现是产生效果的

这样我们就可以根据不同的状态进行相对应的操作。

接下来就是非常重要的兼容性,测试了一下在IE9及一下是不可以的,这也在意料之中,别的游览器只测试了我电脑上版本都是支持的只是有的需要前缀。扔一段检测及兼容主要游览器的代码如下(来自张鑫旭博客)

var pageVisibility = (function() {
var prefixSupport, keyWithPrefix = function(prefix, key) {
if (prefix !== "") {
return prefix + key.slice(,).toUpperCase() + key.slice();
}
return key;
};
var isPageVisibilitySupport = (function() {
var support = false;
if (typeof window.screenX === "number") {
["webkit", "moz", "ms", "o", ""].forEach(function(prefix) {
if (support == false && document[keyWithPrefix(prefix, "hidden")] != undefined) {
prefixSupport = prefix;
support = true;
}
});
}
return support;
})(); var isHidden = function() {
if (isPageVisibilitySupport) {
return document[keyWithPrefix(prefixSupport, "hidden")];
}
return undefined;
}; var visibilityState = function() {
if (isPageVisibilitySupport) {
return document[keyWithPrefix(prefixSupport, "visibilityState")];
}
return undefined;
}; return {
hidden: isHidden(),
visibilityState: visibilityState(),
visibilitychange: function(fn, usecapture) {
usecapture = undefined || false;
if (isPageVisibilitySupport && typeof fn === "function") {
return document.addEventListener(prefixSupport + "visibilitychange", function(evt) {
this.hidden = isHidden();
this.visibilityState = visibilityState();
fn.call(this, evt);
}.bind(this), usecapture);
}
return undefined;
}
};
})(undefined);

如果不支持会返回undefined.

H5 之 Page Visibility的更多相关文章

  1. H5的Page Visibility API

    概述 哈哈,又学了一个H5的API.今天突然对动态获取网页的选中状态很感兴趣,然后去查了下,发现真的有个API控制它--Page Visibility API.于是把学到的东西记录下来,供以后开发时参 ...

  2. 拥抱HTML5 — Page Visibility(页面可见性) API介绍

    H5 提供了很多简单实用的 API,Page Visibility API 就是其中之一. 不知道用户是不是在与页面交互,这是困扰广大 Web 开发人员的一个主要问题.如果 页面最小化了 或者 隐藏在 ...

  3. HTML5 Page Visibility

    什么是 Page Visibility ? Page Visibility 即页面可见性,通过 visibilityState 的值检测页面当前是否可见.当一个网站是可见或点击选中的状态时 Page ...

  4. 页面可见生Page Visibility

    Page Visibility 会在浏览器的 document 对象上添加两个属性 hidden 和 visibilityState .如果当前的标签被激活了,那么 document.hidden 的 ...

  5. Page Visibility(页面可见性) API介绍、微拓展[转]

    一.网页君的悲情谁来懂 唉,突然想到了一首悲情诗: 泪湿罗巾梦不成,夜深前殿按歌声.红颜未老恩先断, 斜倚薰笼坐到明. 学生时代学过的一首诗,已还给老师不知所云的诸位可参见下面释义: 诗的主人公是一位 ...

  6. Page Visibility(网页可见性) API与登录同步引导页实例页面

    页面1  HTML代码: <p id="loginInfo"></p> JS代码: (function() {     if (typeof pageVis ...

  7. Page Visibility实现焦点丢失提醒

    0.前言 HTML5 Page Visibility API是一个很实用的特性.当页面对用户不可见时,暂停播放页面中的视频.动画.声音.以及其它耗费内存的操作,等用户回来时.再继续这些操作. 当然,最 ...

  8. Page Visibility API

    在code review时看见同事使用visibilitychange 事件来监听页面的隐藏与显示,之前没有了解过这块,学习一下. document.visibilityState 主要有以下3个状态 ...

  9. 妙趣横生的HTML5 Page Visibility API

    起因 最近浏览36kr 的网页的时候偶然发现一个有趣的情况:当浏览器Tab 处于非当前页的时候,36kr 的标题栏会自动换成可爱的大白字符形象.Jeff 在第一次看到的时候就知道这种效果是通过HTML ...

随机推荐

  1. CI 模型公用查询函数

    /** * 多字段条件查询数据 * @param array $val array("name" => $value).name为要操作的字段,value为要操作的值 * @ ...

  2. hdu-5776 sum(同余)

    题目链接: sum Time Limit: 2000/1000 MS (Java/Others)     Memory Limit: 131072/131072 K (Java/Others) Pro ...

  3. XML 解析中 SelectSingleNode 与 SelectNodes 使用通配符介绍

    俺是 XML XPath的新手,最近因为项目需要,研究了一下基本的两个函数 SelectSingleNode和SelectNodes 是如何实用通配符的,分享以下基本经验: 假设有段XML 如下所示: ...

  4. Linux系统启动全过程

    分为两部分,第一部分是硬件本身需要加载的信息,之后才是加载Linux相关信息,因为有装有双系统的机器嘛 1.计算机加电 2.BIOS开始运行,检测硬件:cpu.内存.硬盘等 3.BIOS读取CMOS存 ...

  5. PICO 中关于时基ps3000aGetTimebase函数介绍

  6. 【217】◀▶ IDL 控制语句说明

    参考:Statements Routines —— 控制语句关键字 01   FOR 循环语句. 02   FOREACH 循环语句. 03   WHILE...DO 循环语句. 04   IF... ...

  7. classpath路径指什么

    一.classpath路径指什么 只知道把配置文件如:mybatis.xml.spring-web.xml.applicationContext.xml等放到src目录(就是存放代码.java文件的目 ...

  8. git搭建私有仓库

    git gui参考 https://ask.helplib.com/git/post_1004941

  9. set和multiset容器

    set和multiset容器的能力 set 和multiset容器的内部结构通常由平衡二叉树(balanced binary tree)来实现.当元素放入容器中时,会按照一定的排序法则自动排序,默认是 ...

  10. c++中虚函数与纯虚函数的区别(转)

    首先:强调一个概念定义一个函数为虚函数,不代表函数为不被实现的函数.定义他为虚函数是为了允许用基类的指针来调用子类的这个函数.定义一个函数为纯虚函数,才代表函数没有被实现.定义纯虚函数是为了实现一个接 ...