visibilitychange
当其选项卡的内容变得可见或被隐藏时,会在文档上触发 visibilitychange
(能见度更改) 事件。
概述
使用说明
该事件不包括文档的更新的可见性状态,但是你可以从文档的 visibilityState
属性中获取该信息。
警告: 当 visibleStateState 属性的值转换为 hidden
时,Safari 不会按预期触发 visibilitychange
;因此,在这种情况下,你还需要包含代码以侦听 pagehide
事件。
警告: 出于兼容性原因,请确保使用 document.addEventListener
而不是 window.addEventListener
来注册回调。Safari <14.0 仅支持前者。
属性
Property | Type | Description |
---|---|---|
target 只读 |
EventTarget |
The event target (the topmost target in the DOM tree). |
type 只读 |
DOMString |
The type of event. |
bubbles 只读 |
Boolean |
Whether the event normally bubbles or not. |
cancelable 只读 |
Boolean |
Whether the event is cancellable or not. |
例子
本示例在文档可见时开始播放音乐曲目,在文档不再可见时暂停音乐。
js
document.addEventListener("visibilitychange", function () {
console.log(document.visibilityState);
});
document.addEventListener("visibilitychange", function() { if (document.visibilityState === 'visible') { backgroundMusic.play(); } else { backgroundMusic.pause(); } });
规范
Specification |
---|
HTML Standard # event-visibilitychange |
HTML Standard # handler-onvisibilitychange |
浏览器兼容性
BCD tables only load in the browser