Page Visibility API(可以查看页面当前可见性状态的API)

最新推荐文章于 2024-03-10 12:00:59 发布

静水流深，沧海一粟

最新推荐文章于 2024-03-10 12:00:59 发布

阅读量246

点赞数 2

分类专栏：浏览器API 文章标签： javascript 前端

本文链接：https://blog.csdn.net/aXin_li/article/details/130193518

版权

浏览器API 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

PageVisibilityAPI允许开发者检测用户是否离开或最小化了页面，例如在用户切换标签或窗口时暂停视频播放。当页面visibilityState改变时，它会触发visibilitychange事件，可用于优化实时数据更新和用户分析报告。示例代码展示了如何暂停和恢复视频播放，以适应页面的隐藏和显示状态。

摘要由CSDN通过智能技术生成

Page Visibility API

作用
它可以让你知道用户何时离开了页面。准确地说，只要页面的可见性状态发生变化，无论是用户最小化、最大化窗口还是切换标签页，该API都会触发一个事件。
使用场景

当用户离开页面时暂停视频、图像旋转或动画
如果页面显示来自API的实时数据，在用户离开时暂时停止实时显示的行为
发送用户分析报告

属性
- **~~Document.hidden~~ **
  - 该属性是全局可见并且只读。尽量避免使用该属性，因为现在已经被废弃了。当访问该属性时，如果页面是隐藏状态则返回true，如果页面是可见状态则返回false。
- Document.visibilityState
  - 该属性是document.hidden更新后的版本。当访问该属性时，会根据页面的可见性状态返回四个可能的值。
    - visible：该页面是可见的，或者准确地说，它没有被最小化，也不在另一个标签页。
    - hidden：该页面不可见，它是最小化的，或者在另一个标签页。
    - prerender：这是一个可见页面在预渲染时的初始状态。一个页面的可见性状态可以从prerender开始，然后改变到另一个状态，但它不能从另一个状态改变到prerender。
    - unloaded：该页面正在从内存中卸载。
- 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>