当前位置: 首页 » 前端开发 » Page Visibility API
 |  全屏浏览  |  字号调整:

Page Visibility API

haibao 2018-04-17 14:00:49 前端开发 0 0 603 百度已收录
历史上的今天:11月21日,世界问候日 - 1992年,厄瓜多尔发生海豚集体自杀事件

周三凌晨好, 本文除去代码部分,共2036个字,预计阅读时间需要6分钟。

不知道用户是不是正在与页面交互,这是困扰广大 Web 开发人员的一个主要问题。如果页面最小 化了或者隐藏在了其他标签页后面,那么有些功能是可以停下来的,比如轮询服务器或者某些动画效果。 而 Page Visibility API(页面可见性 API)就是为了让开发人员知道页面是否对用户可见而推出的。

这个 API 本身非常简单,由以下三部分组成。

一、 document.hidden: 表示页面是否隐藏的布尔值。页面隐藏包括页面在后台标签页中或者浏览器最小化。

二、 document.visibilityState: 表示下列 4 个可能状态的值。

  1. 页面在后台标签页中或浏览器最小化。
  2. 页面在前台标签页中。
  3. 实际的页面已经隐藏,但用户可以看到页面的预览(就像在 Windows 7 中,用户把鼠标移动到任务栏的图标上,就可以显示浏览器中当前页面的预览)。
  4. 页面在屏幕外执行预渲染处理。

三、 visibilitychange 事件: 当文档从可见变为不可见或从不可见变为可见时,触发该事件。 IE 的版本是在每个属性或事件前面加 上 ms 前缀,而 Chrome 则是加上 webkit 前缀。因此 document.hidden 在 IE 的实现中就是 document.msHidden,而在 Chrome 的实现中则是 document.webkitHidden。检查浏览器是否支持这个 API 的最佳方式如下:

1
2
3
function isHiddenSupported() {
    return typeof (document.hidden || document.msHidden || document.webkitHidden) != "undefined";
}

类似地,使用同样的模式可以检测页面是否隐藏:

1
2
3
4
5
if (document.hidden || document.msHidden || document.webKitHidden) { 
  //页面隐藏了
} else {
  //页面未隐藏
}

注意,以上代码在不支持该 API 的浏览器中会提示页面未隐藏。这是 Page Visibility API 有意设计的结果,目的是为了向后兼容。

为了在页面从可见变为不可见或从不可见变为可见时收到通知,可以侦听 visibilitychange 事 件。在 IE 中,这个事件叫 msvisibilitychange,而在 Chrome 中这个事件叫 webkitvisibility-change。为了在两个浏览器中都能侦听到该事件,可以像下面的例子一样,为每个事件都指定相同的事件处理程序:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
function handleVisibilityChange() {
    var output = document.getElementById("output"),
        msg;
    if (document.hidden || document.msHidden || document.webkitHidden){ 
        msg = "Page is now hidden. " + (new Date()) + "<br>";
    } else {
        msg = "Page is now visible. " + (new Date()) + "<br>";
    }
    output.innerHTML += msg;
}
 
//要为两个事件都指定事件处理程序
EventUtil.addHandler(document, "msvisibilitychange", handleVisibilityChange); 
EventUtil.addHandler(document, "webkitvisibilitychange", handleVisibilityChange);

以上代码同时适用于 IE 和 Chrome。而且,API 的这一部分已经相对稳定,因此在实际的 Web 开发中也可以使用以上代码。

关于这一 API 的实现,差异最大的是 document.visibilityState 属性。IE10 PR 2 的 document.msVisibilityState 是一个表示如下 4 种状态的数字值。

1
2
3
4
(1) document.MS_PAGE_HIDDEN (0)
(2) document.MS_PAGE_VISIBLE (1)
(3) document.MS_PAGE_PREVIEW (2)
(4) document.MS_PAGE_PRERENDER (3)

在 Chrome 中,document.webkitVisibilityState 可能是下列 3 个字符串值:

1
2
3
(1) "hidden"
(2) "visible"
(3) "prerender"

Chrome 并没有给每个状态定义对应的常量,但最终的实现很可能会使用常量。

由于存在以上差异,所以建议大家先不要完全依赖带前缀的 document.visibilityState,最好只使用 document.hidden 属性。

兼容性

Page Visibility API已经兼容各主流浏览器 ; IE10, Chrome, Firefox等。
Page Visibility API对浏览器也是无害的,当浏览器不支持时,它会被忽略。

本篇完!谢谢。

本文来源于《JavaScript高级程序设计(第3版)》

文章编辑:haibao 发布于:2018-04-17 14:00:49

本文标题:Page Visibility API

本文地址:http://www.hehaibao.com/page-visibility-api/

版权声明:本博客所有文章除特别声明外,均采用 署名-非商业性使用-禁止演绎 4.0 国际 许可协议。请尊重他人的劳动成果!


发表评论

电子邮件地址不会被公开。 必填项已用*标注

切换注册

登录

忘记密码 ?

切换登录

注册