HTML 5页面可视性API

voidking 发布于2019-08-01 14:44 / 1483人阅读

摘要：原文译文的页面可视性译者在早期，浏览器并没有提供选项卡，但是现在基本所有浏览器都提供了这个功能。在这个中，将基于页面的可视性状态弹出文档的标题。对于常见的手风情效果，当页面不可见时，可以限制其移动。

原文：HTML5 Page Visibility API

译文：HTML 5的页面可视性API

译者：dwqs

在早期，浏览器并没有提供选项卡，但是现在基本所有浏览器都提供了这个功能。作为一个程序员，我一般会同时打开10到15个选项卡，甚至有些时候会在25到30.

为什么介绍Page Visibility API呢？

之前，是不可能确定哪个选项卡是激活的，哪个没有激活，但是在HTML 5 Visibility API的帮助下，就可以检测用户是否在浏览某个网站的页面。

在这篇文章中，我们将会理解如何使用HTML 5 Visibility API，并且用一个小demo去发觉页面的状态。在这个demo中，将基于页面的可视性状态弹出文档的标题。

检查页面的可见性

为了使用Visibility API，我们要先了解两个新的文档属性，第一个是document.visibilityState，另一个是document.hidden.它们的功能是不同的。

document.visibilityState有四个不同的值：

1、hidden：页面在任何屏幕上不可见

2、prerender：页面在加载，对用户不可见

3、visible：页面可见

4、unloaded：页面卸载（即用户将离开当前页面）

document.hidden是一个布尔值，false表示页面可见，true表示页面不可见。

既然知道了可用的属性，就是时候去监听事件了，这样子就可以知道页面的可见性是什么状态。这是

利用visibilitychange事件完成的，示例如下：

document.addEventListener("visibilitychange", function(event) {
  if (!document.hidden) {
    // The page is visible.
  } else {
   // The page is hidden.
  }
});

这段代码是visibilitychange事件的一个简单应用—检测当前页面的状态。但是你必须知道的是所有属性和方法都必须带前缀，因为他们在一些浏览器中是带私有前缀的。下面则是一个跨浏览器的案例：

// Get Browser-Specifc Prefix
function getBrowserPrefix() {

  // Check for the unprefixed property.
  if ("hidden" in document) {
    return null;
  }

  // All the possible prefixes.
  var browserPrefixes = ["moz", "ms", "o", "webkit"];

  for (var i = 0; i < browserPrefixes.length; i++) {
    var prefix = browserPrefixes[i] + "Hidden";
    if (prefix in document) {
      return browserPrefixes[i];
    }
  }

  // The API is not supported in browser.
  return null;
}

// Get Browser Specific Hidden Property
function hiddenProperty(prefix) {
  if (prefix) {
    return prefix + "Hidden";
  } else {
    return "hidden";
  }
}

// Get Browser Specific Visibility State
function visibilityState(prefix) {
  if (prefix) {
    return prefix + "VisibilityState";
  } else {
    return "visibilityState";
  }
}

// Get Browser Specific Event
function visibilityEvent(prefix) {
  if (prefix) {
    return prefix + "visibilitychange";
  } else {
    return "visibilitychange";
  }
}

现在有了所有浏览器带前缀的属性和方法，就可以放心应用了。对之前的代码做出调整：

// Get Browser Prefix
var prefix = getBrowserPrefix();
var hidden = hiddenProperty(prefix);
var visibilityState = visibilityState(prefix);
var visibilityEvent = visibilityEvent(prefix);

document.addEventListener(visibilityEvent, function(event) {
  if (!document[hidden]) {
    // The page is visible.
  } else {
   // The page is hidden.
  }
});

哪些地方需要用到Visibility API呢？

在下列情况中，就可以考虑使用API了：
1、你在浏览一个导航页面，并且这个页面正在从一个RSS源查询细节，或者定期调用API，如果页面对用户不可见的话，
我们可以限制对RSS源或者API的调用。
2、对于常见的手风情效果，当页面不可见时，可以限制其移动。
3、同样的方式，只有页面不可见的时候，才显示HTML Notification（译文：http://www.ido321.com/1130.html）给用户。
我们已经知道代码怎么去调用Visibility API了，接下来就看一个Demo吧。

Demo

Demo1：利用Visibility API改变页面标题：View Demo

Demo2：当页面不可见时，怎么从限制查询从服务器传送的数据。

在Demo2中，对于来自服务器的刷新信息，我们将怎么限制查询？不仅是用户正在浏览页面，并且假设页面已经引入了JQuery。为了简单，仅仅以计数说明，但是可以用真实的服务器数据代替。

HTML：

JavaScript：

View Demo

浏览器支持

如果想知道浏览器是否支持Visibility API，我建议去Can I use?去查询。但是建议用编程的方式去检测浏览器是否支持，可以参考Detect Support for Various HTML5 Features（译文：

http://www.ido321.com/1116.html)。在主流的现代浏览器中已经对这个API有了很好的支持

总结

我说过，有一个包含两个属性和一个事件的很不错的API给我们使用。它可以很容易的整合到你已经存在的应用中，并可以带来很好的用户体验。最后想说的是，当页面对用户不可见的时候，我们就可以控制页面的行为了。

原文首发：http://www.ido321.com/1126.html

服务器托管混合云可视化页面 js 获取可视页面可视对讲api html可视区域

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/49554.html

HTML 5页面可视性API

摘要：原文译文的页面可视性译者在早期，浏览器并没有提供选项卡，但是现在基本所有浏览器都提供了这个功能。在这个中，将基于页面的可视性状态弹出文档的标题。对于常见的手风情效果，当页面不可见时，可以限制其移动。原文：HTML5 Page Visibility API 译文：HTML 5的页面可视性API 译者：dwqs showImg(https://segmentfault.com/im...

buildupchao 2019-08-02 18:07 评论0 收藏0
Segmentfault的热门标签，可视化展示？

摘要：结论居首位，紧随其后，位列第三。数据库方面问题最多的还是。在各种技术名词的标签下，还冒出一个程序员标签，排名第位。结论 JavaScript居首位，HTML5紧随其后，Python位列第三。注：数据来源于569页标签页面的11,380 条记录 showImg(https://segmentfault.com/img/bVXMRf?w=1178&h=548);showImg(http...

rottengeek 2019-08-21 17:24 评论0 收藏0
Segmentfault的热门标签，可视化展示？

摘要：结论居首位，紧随其后，位列第三。数据库方面问题最多的还是。在各种技术名词的标签下，还冒出一个程序员标签，排名第位。结论 JavaScript居首位，HTML5紧随其后，Python位列第三。注：数据来源于569页标签页面的11,380 条记录 showImg(https://segmentfault.com/img/bVXMRf?w=1178&h=548);showImg(http...

gecko23 2019-07-30 14:54 评论0 收藏0
浏览器元素尺寸与位置查询指南

摘要：前言这篇文章主要介绍了有关浏览器中获取坐标以及尺寸的几种途径算是比较全的一篇文章了在浏览器中获取元素的坐标以及尺寸是非常容易的有非常多种方式来完成这些需求但是杂乱的和很多兼容处理导致了浏览器中没有直接的方式来获取我们想要的结果仔细想想这个问前言这篇文章主要介绍了有关浏览器中获取坐标以及尺寸的几种途径,算是比较全的一篇文章了. 在浏览器中获取元素的坐标以及尺寸是非常容易的,有非常多种...

lei___ 2019-08-26 13:44 评论0 收藏0
浏览器元素尺寸与位置查询指南

摘要：前言这篇文章主要介绍了有关浏览器中获取坐标以及尺寸的几种途径算是比较全的一篇文章了在浏览器中获取元素的坐标以及尺寸是非常容易的有非常多种方式来完成这些需求但是杂乱的和很多兼容处理导致了浏览器中没有直接的方式来获取我们想要的结果仔细想想这个问前言这篇文章主要介绍了有关浏览器中获取坐标以及尺寸的几种途径,算是比较全的一篇文章了. 在浏览器中获取元素的坐标以及尺寸是非常容易的,有非常多种...

kidsamong 2019-08-05 16:59 评论0 收藏0