Page Visibility API
- 作用
它可以让你知道用户何时离开了页面。准确地说,只要页面的可见性状态发生变化,无论是用户最小化、最大化窗口还是切换标签页,该API都会触发一个事件。 - 使用场景
- 当用户离开页面时暂停视频、图像旋转或动画
- 如果页面显示来自API的实时数据,在用户离开时暂时停止实时显示的行为
- 发送用户分析报告
- 属性
- **
Document.hidden**- 该属性是全局可见并且只读。尽量避免使用该属性,因为现在已经被废弃了。当访问该属性时,如果页面是隐藏状态则返回true,如果页面是可见状态则返回false。
- Document.visibilityState
- 该属性是document.hidden更新后的版本。当访问该属性时,会根据页面的可见性状态返回四个可能的值。
- visible:该页面是可见的,或者准确地说,它没有被最小化,也不在另一个标签页。
- hidden:该页面不可见,它是最小化的,或者在另一个标签页。
- prerender:这是一个可见页面在预渲染时的初始状态。一个页面的可见性状态可以从prerender开始,然后改变到另一个状态,但它不能从另一个状态改变到prerender。
- unloaded:该页面正在从内存中卸载。
- 该属性是document.hidden更新后的版本。当访问该属性时,会根据页面的可见性状态返回四个可能的值。
- Document.onvisibilitychange
- visibilitychange:这是一个由document对象提供的事件,当页面的visibilityState发生变化时被触发。
- **
- 参考案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>pageVisibleApi</title>
</head>
<body>
<h1>Demo: Page Visibility API</h1>
<main>
<video id="videoElement" controls>
<source src="https://s3-ap-northeast-1.amazonaws.com/daniemon/demos/The%2BVillage-Mobile.mp4" type="video/mp4" media="all and (max-width:680px)">
<source src="https://s3-ap-northeast-1.amazonaws.com/daniemon/demos/The%2BVillage-Mobile.webm" type="video/webm" media="all and (max-width:680px)">
<source src="https://s3-ap-northeast-1.amazonaws.com/daniemon/demos/The%2BVillage-SD.mp4" type="video/mp4">
<source src="https://s3-ap-northeast-1.amazonaws.com/daniemon/demos/The%2BVillage-SD.webm" type="video/webm">
<p>Sorry, there's a problem playing this video. Please try using a different browser.</p>
</video>
</main>
<script>
(function() {
'use strict';
// Set the name of the "hidden" property and the change event for visibility
var hidden, visibilityChange;
if (typeof document.hidden !== "undefined") {
hidden = "hidden";
visibilityChange = "visibilitychange";
} else if (typeof document.mozHidden !== "undefined") { // Firefox up to v17
hidden = "mozHidden";
visibilityChange = "mozvisibilitychange";
} else if (typeof document.webkitHidden !== "undefined") { // Chrome up to v32, Android up to v4.4, Blackberry up to v10
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() {
console.log(document['visibilityState'])
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" || typeof document[hidden] === "undefined") {
alert("This demo requires a modern browser that supports the Page Visibility API.");
} else {
// Handle page visibility change
document.addEventListener(visibilityChange, handleVisibilityChange, false);
// When the video pauses and plays, change the title.
videoElement.addEventListener("pause", function(){
document.title = 'Paused';
}, false);
videoElement.addEventListener("play", function(){
document.title = 'Playing'
}, false);
}
})();
</script>
</body>
</html>