浏览器切换页签时触发事件

js
js, question, source

页面可见性API

先解决问题，后面理解

1
2
3
4
5
6
7
8
9
function handleVisibilityChange() {
  if (document.hidden) {
    //这里是页签最小化或被切换的时候
  } else  {
    //这里是页签重新展示出来的时候
  }
}

document.addEventListener("visibilitychange", handleVisibilityChange, false);

简介

  • 通过标签浏览，任何给定的网页都处于后台并因此对用户不可见是合理的机会。页面可见性API提供了可以监视的事件，以了解文档何时可见或隐藏，以及查看页面当前可见性状态的功能。
注意：页面可见性API通过让页面在文档不可见时避免执行不必要的任务来节省资源和提高性能特别有用。
  • 当用户最小化窗口或切换到另一个选项卡时，API会发送一个visibilitychange事件让听众知道页面的状态已更改。您可以检测到事件并执行一些操作或行为不同。例如，如果您的网络应用正在播放视频，则可以在用户将选项卡放入后台时暂停视频，并在用户返回选项卡时恢复播放。用户不会在视频中失去自己的位置，视频的配乐不会干扰新前景标签中的音频，并且用户在此期间不会错过任何视频。
注意：虽然onblur并且onfocus会告诉你用户是否切换窗口，但并不一定意味着它已隐藏。只有当用户切换标签或最小化包含标签的浏览器窗口时，页面才会隐藏。

事件：

  1. visibilitychange

    浏览器标签页被隐藏或显示的时候会触发visibilitychange事件。

属性：

  1. Document.hidden
  2. Document.visibilityState

页面可见性API将以下属性添加到Document界面中：

  • Document.hidden
    返回true页面是否处于被认为对用户隐藏的状态，false否则返回。

  • Document.visibilityState 四个值
    A DOMString表示文档当前的可见性状态。可能的值是：

    • visible
      页面内容可能至少部分可见。实际上这意味着该页面是非最小化窗口的前景选项卡。

    • hidden
      该页面的内容对用户不可见，这可能是由于文档的标签位于后台或最小化窗口的一部分，或者由于设备的屏幕关闭了。

    • prerender
      该页面的内容正在被预渲染，并且对用户不可见。文档可以在prerender状态中启动，但不会从任何其他状态切换到此状态，因为文档只能预渲染一次。
      注意：并非所有浏览器都支持预渲染。

    • unloaded
      该页面正在从内存中卸载。
      注意：并非所有浏览器都支持该unloaded值。

  • Document.onvisibilitychange
    一个EventListener提供的代码时，被称为visibilitychange事件。

兼容问题

为了支持老版本的浏览器，我们需要对document.hidden在做一些前缀处理：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

function getHiddenProp(){
    var prefixes = ['webkit','moz','ms','o'];
    
    // if 'hidden' is natively supported just return it
    if ('hidden' in document) return 'hidden';
    
    // otherwise loop over all the known prefixes until we find one
    for (var i = 0; i < prefixes.length; i++){
        if ((prefixes[i] + 'Hidden') in document) 
            return prefixes[i] + 'Hidden';
    }
 
    // otherwise it's not supported
    return null;
}

同理以获取document.visibilityState属性：

1
2
3
4
5
6
7
8
9
10
function getVisibilityState() {
    var prefixes = ['webkit', 'moz', 'ms', 'o'];
    if ('visibilityState' in document) return 'visibilityState';
    for (var i = 0; i < prefixes.length; i++) {
        if ((prefixes[i] + 'VisibilityState') in document)
            return prefixes[i] + 'VisibilityState';
    }
    // otherwise it's not supported
    return null;
}

参考阅读：
https://developer.mozilla.org/en-US/docs/Web/API/Page_Visibility_API

分享到