页面可见性api_页面可见性API简介

最新推荐文章于 2024-09-10 10:21:38 发布

dingshi7798

最新推荐文章于 2024-09-10 10:21:38 发布

阅读量96

点赞数

文章标签： java javascript js html web ViewUI

原文链接：https://www.sitepoint.com/introduction-to-page-visibility-api/

版权

页面可见性api

手机很棒。移动应用程序更酷。不幸的是，在大多数情况下，移动连接很慢，因为它们很慢，或者您没有无限的带宽。拥有不浪费用户资源的富Web应用程序将是非常不错的，尤其是当他们不在查看该页面时。本文将向您展示如何使用Page Visibility API部分解决此问题以及其他问题。

在过去的几年中，引入了一些新的出色API来帮助我们进行日常工作，例如Geolocation API ， Navigation Timing API和Full-screen API 。页面可见性API 定义了一种方法，站点开发人员可以以编程方式确定页面的当前可见性状态，以便开发功能强大且CPU效率高的Web应用程序。从2012年7月26 ^日开始，它是W3C候选推荐书，因此被认为是稳定的。

您可能想知道的第一件事是它们如何提高性能并节省带宽。设想一下您有一个基于AJAX的出色Web应用程序，该应用程序每五秒钟来回发送数据的情况。如果在应用程序运行时用户将浏览器选项卡发送到后台，它仍将每五秒钟发送一次数据，并且如果用户在10分钟后将选项卡放在前台。如果应用程序减慢了更新速度或停止了更新直到用户再次查看该页面，那不是很好吗？这是进行资源优化的地方，而页面可见性API扮演着关键角色。

如何制作页面可见性API

这些API非常简单，实际上它们有一个事件，称为visibilitychange和两个只读属性，分别属于document ， hidden和visibilityState 。 hidden是一个布尔值，如果页面不可见（即使是最小的部分），则为true通常在选项卡处于后台或最小化浏览器时才会发生。重要的是要注意，该规则对于在全屏模式下运行的辅助功能工具有一些例外。您可以通过阅读隐藏的规范来了解更多信息。

visibilityState是一个枚举，它指定文档的当前状态，并包含以下值：

hidden ：根本看不到文档
visible ：文档或文档的一部分可见
prerender ：文档已加载到屏幕外且不可见
unloaded ：文档将被卸载

请注意，最后两个值prerender和unloaded 是可选的。此外，与hidden属性一样， hidden值在辅助技术方面也有一些例外。

兼容性

当前，支持这些API的浏览器并不多，并且仍使用供应商前缀的浏览器。这会导致支持问题，因为您必须管理所有前缀才能拥有有效的代码。当前，支持Page Visibility API的桌面浏览器是Chrome 13 +，Internet Explorer 10，Firefox 10 +， Opera beta 12.10 。支持该API的移动浏览器是Android 4.0+上的Chrome浏览器和Android和Symbian上的Opera Mobile 12.1+（源MobileHTML5.org-我本人在Android 4.0上进行了测试）。

稍微令人讨厌的一点是，由于使用camelCase约定，如果属性带有供应商前缀，则实际属性名称的首字母大写，如果没有前缀则小写。为了清楚起见，让我们采用hidden属性。如您所见，它以小写字母开头，但如果有前缀，则以大写字母“ h”开头，因此要测试支持，您不能编写类似于以下内容的代码：

var browserPrefixes = ["", "webkit","moz","ms","o"];
for(var i = 0; i < browserPrefixes.length; i++) {
  if (document[browserPrefixes[i] + "hidden"] != undefined)
    // here goes the code
}

而且您必须拆分大小写，如下所示，或者对字符串使用一些技巧。

// Test for unprefixed version
if (document.hidden !== undefined)
  // here goes the code
else {
  // Test for prefixed version
  var browserPrefixes = ["webkit", "moz", "ms", "o"];
  for(var i = 0; i < browserPrefixes.length; i++) {
    if (document[browserPrefixes[i] + "Hidden"] != undefined) {
      // here goes the code
    }
  }
}

一如往常，就像其他API一样，已经发布了许多polyfill，以在不支持它们的浏览器中使用这些API。其中一些polyfill是visfully.js和isVis.js 。

让我们创建一个工作示例

在本节中，我将指导您创建一个使用Page Visibility API的简单演示页面。该页面将首先测试对浏览器的支持，然后计算用户实际看到该页面并记录其状态的次数。我们的演示中只有三个关键功能。第一个测试浏览器是否使用了供应商前缀版本，并将在显示的最后代码之上创建。如果浏览器使用无前缀版本，它将返回一个空字符串；如果使用带前缀版本，则将返回供应商前缀；如果浏览器不支持API，则将返回null 。

function getPrefix() {
  var prefix = null;
  if (document.hidden !== undefined)
    prefix = "";
  else {
    var browserPrefixes = ["webkit","moz","ms","o"];
    // Test all vendor prefixes
    for(var i = 0; i < browserPrefixes.length; i++) {
      if (document[browserPrefixes[i] + "Hidden"] != undefined) {
        prefix = browserPrefixes[i];
        break;
      }
    }
  }
  return prefix;
}

第二个功能记录状态，并在显示页面时增加视图计数。

function countView() {
  // The page is in foreground and visible
  if (document.hidden === false || document[prefix + "Hidden"] === false)
    views++;

  document.getElementById("log").innerHTML += "Your view count is: " + views + " . " + "Your page current state is: " + document[(prefix === "" ? "v" : prefix + "V") + "isibilityState"] + "
";
}

第三个也是最后一个函数测试浏览器是否支持API，并且如果测试为true ，它将向visibilitychange更改事件附加一个处理程序，否则通知用户。请注意，管理供应商前缀也需要此功能。

function testPageVisibilityApi() {
  if (prefix === null)
    document.getElementById("log").innerHTML = "Your browser does not support Page Visibility API";
  else {
    document.addEventListener(prefix + "visibilitychange", countView);
    countView();
  }
}

放在一起

给定上一节中显示的功能，下面是最终且完全有效的代码。

<!DOCTYPE html>
<html>
  <head>
    <title>Page Visibility API Test Page by Aurelio De Rosa</title>
    <script>
      function getPrefix() {
        var prefix = null;
        if (document.hidden !== undefined)
          prefix = "";
        else {
          var browserPrefixes = ["webkit","moz","ms","o"];
          // Test all vendor prefixes
          for(var i = 0; i < browserPrefixes.length; i++) {
            if (document[browserPrefixes[i] + "Hidden"] != undefined) {
              prefix = browserPrefixes[i];
              break;
            }
          }
        }
        return prefix;
      }

      function countView() {
        // The page is in foreground and visible
        if (document.hidden === false || document[prefix + "Hidden"] === false)
          views++;

        document.getElementById("log").innerHTML += "Your view count is: <b>" + views +
          "</b>. " + "Your page current state is: <b>" +
          document[(prefix === "" ? "v" : prefix + "V") + "isibilityState"] + "</b><br />";
      }

      function testPageVisibilityApi() {
        if (prefix === null)
          document.getElementById("log").innerHTML = "Your browser does not support Page Visibility API";
        else {
          document.addEventListener(prefix + "visibilitychange", countView);
          countView();
        }
      }

      var views = 0;
      var prefix = getPrefix();
      window.onload = testPageVisibilityApi;
    </script>
  </head>
  <body>
    <p id="log"></p>
  </body>
</html>

在Mozilla开发人员网络上可以找到其他一些很好的示例。