跳到主要内容

all

2023年06月08日
柏拉文
越努力，越幸运

afterscriptexecute​

beforescriptexecute​

copy​

cut​

DOMContentLoaded​

fullscreenchange​

fullscreenerror​

lostpointercapture​

mssitemodejumplistitemremoved​

msthumbnailclick​

paste​

pointerlockchange​

pointerlockerror​

readystatechange​

scroll​

scrollend​

selectionchange​

visibilitychange​

visibilitychange 当其选项卡的内容变得可见或被隐藏时，会在文档上触发 visibilitychange (能见度更改) 事件。该事件不包括文档的更新的可见性状态，但是您可以从文档的 visibilityState 属性中获取该信息。

注意

  1. 出于兼容性原因，请确保使用 document.addEventListener 而不是 window.addEventListener 来注册回调。Safari <14.0 仅支持前者。

  2. 当 visibleStateState 属性的值转换为 hidden 时，Safari 不会按预期触发 visibilitychange；因此，在这种情况下，您还需要包含代码以侦听 pagehide 事件。

语法:

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

  • event.target

  • event.type: 事件类型, 值为: event.type = "visibilitychange"

  • event.bubbles

  • event.cancelable

场景:

  • 场景一、在文档可见时开始播放音乐曲目，在文档不再可见时暂停音乐

    document.addEventListener("visibilitychange", function() {
        if (document.visibilityState === 'visible') {
            backgroundMusic.play();
        } else {
            backgroundMusic.pause();
        }
    });

触发条件:

  • 条件一、切换浏览器 Tab

  • 条件二、切换任务栏

总而言之, 当前屏幕必须为当前窗口。注意, visibilitychange 分屏状态下, 是监控不到的。