With tabbed browsing, there is a reasonable chance that any given webpage is in the background and thus not visible to the user. The Page Visibility API provides events you can watch for to know when a document becomes visible or hidden, as well as features to look at the current visibility state of the page.
注意事项： The Page Visibility API is especially useful for saving resources and improving performance by letting a page avoid performing unnecessary tasks when the document isn't visible.
When the user minimizes the window or switches to another tab, the API sends a
visibilitychange
event to let listeners know the state of the page has changed. You can detect the event and perform some actions or behave differently. For example, if your web app is playing a video, it can pause the video when the user puts the tab into the background, and resume playback when the user returns to the tab. The user doesn't lose their place in the video, the video's soundtrack doesn't interfere with audio in the new foreground tab, and the user doesn't miss any of the video in the meantime.
Visibility states of an
<iframe>
are the same as the parent document. Hiding an
<iframe>
using CSS properties (such as
display: none;
) doesn't trigger visibility events or change the state of the document contained within the frame.
Let's consider a few use cases for the Page Visibility API.
Developers have historically used imperfect proxies to detect this. For example, watching for
blur
and
focus
events on the window helps you know when your page is not the active page, but it does not tell you that your page is actually hidden to the user. The Page Visibility API addresses this.
注意：
While
onblur
and
onfocus
will tell you if the user switches windows, it doesn't necessarily mean it's hidden. Pages only become hidden when the user switches tabs or minimizes the browser window containing the tab.
Separately from the Page Visibility API, user agents typically have a number of policies in place to mitigate the performance impact of background or hidden tabs. These may include:
requestAnimationFrame()
callbacks to background tabs or hidden
<iframe>
s in order to improve performance and battery life.
setTimeout()
are throttled in background/inactive tabs to help improve performance. See
Reasons for delays longer than specified
了解更多细节。
Some processes are exempt from this throttling behavior. In these cases, you can use the Page Visibility API to reduce the tabs' performance impact while they're hidden.
视图 live example (video with sound).
The example, which pauses the video when you switch to another tab and plays again when you return to its tab, was created with the following code:
// Set the name of the hidden property and the change event for visibility
var hidden, visibilityChange;
if (typeof document.hidden !== "undefined") { // Opera 12.10 and Firefox 18 and later support
hidden = "hidden";
visibilityChange = "visibilitychange";
} else if (typeof document.msHidden !== "undefined") {
hidden = "msHidden";
visibilityChange = "msvisibilitychange";
} else if (typeof document.webkitHidden !== "undefined") {
hidden = "webkitHidden";
visibilityChange = "webkitvisibilitychange";
}
var videoElement = document.getElementById("videoElement");
// If the page is hidden, pause the video;
// if the page is shown, play the video
function handleVisibilityChange() {
if (document[hidden]) {
videoElement.pause();
} else {
videoElement.play();
}
}
// Warn if the browser doesn't support addEventListener or the Page Visibility API
if (typeof document.addEventListener === "undefined" || hidden === undefined) {
console.log("This demo requires a browser, such as Google Chrome or Firefox, that supports the Page Visibility API.");
} else {
// Handle page visibility change
document.addEventListener(visibilityChange, handleVisibilityChange, false);
// When the video pauses, set the title.
// This shows the paused
videoElement.addEventListener("pause", function(){
document.title = 'Paused';
}, false);
// When the video plays, set the title.
videoElement.addEventListener("play", function(){
document.title = 'Playing';
}, false);
}
The Page Visibility API adds the following properties to the
Document
接口：
Document.hidden
只读
true
if the page is in a state considered to be hidden to the user, and
false
否则。
Document.visibilityState
只读
DOMString
indicating the document's current visibility state. Possible values are:
visible
The page content may be at least partially visible. In practice this means that the page is the foreground tab of a non-minimized window.
hidden
The page's content is not visible to the user, either due to the document's tab being in the background or part of a window that is minimized, or because the device's screen is off.
prerender
prerender
state, but will never switch to this state from any other state, since a document can only prerender once.
注意：
Not all browsers support prerendering.
unloaded
unloaded
值。
Document.onvisibilitychange
EventListener
providing the code to be called when the
visibilitychange
event is fired.
//startSimulation and pauseSimulation defined elsewhere
function handleVisibilityChange() {
if (document.hidden) {
pauseSimulation();
} else {
startSimulation();
}
}
document.addEventListener("visibilitychange", handleVisibilityChange, false);
| 规范 | 状态 | 注释 |
|---|---|---|
| Page Visibility (Second Edition) | 推荐 | 初始定义。 |
Document.visibilityState
| 桌面 | 移动 | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
visibilityState
|
Chrome
33
|
Edge 12 |
Firefox
18
|
IE 10 |
Opera
12.1
|
Safari 7 | WebView Android 4.4.3 |
Chrome Android
33
|
Firefox Android
18
|
Opera Android
12.1
|
Safari iOS 7 |
Samsung Internet Android
3.0
|
prerender
值
弃用
非标
|
Chrome Yes | Edge ≤79 | Firefox 49 | IE ? | Opera ? | Safari ? | WebView Android Yes | Chrome Android Yes | Firefox Android 49 | Opera Android ? | Safari iOS ? | Samsung Internet Android Yes |
完整支持
兼容性未知
非标。预期跨浏览器支持较差。
弃用。不要用于新网站。
见实现注意事项。
要求使用供应商前缀或不同名称。