页面中指定元素进入全屏&&退出全屏

最新推荐文章于 2025-06-06 15:41:34 发布

SarinaDu

最新推荐文章于 2025-06-06 15:41:34 发布

阅读量316

点赞数 6

文章标签： css css3 html

本文链接：https://blog.youkuaiyun.com/m0_37148591/article/details/145876865

版权

可运行demo

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Fullscreen Div Example</title>
    <style>
        /* 设置 div 的样式 */
        #fullscreenDiv {
            width: 300px; /* 宽度 */
            height: 200px; /* 高度 */
            background-color: lightblue; /* 背景颜色 */
            display: flex; /* 使用 flex 布局 */
            justify-content: center; /* 水平居中 */
            align-items: center; /* 垂直居中 */
            cursor: pointer; /* 鼠标悬停时显示为手型 */
        }
    </style>
</head>
<body>
    <!-- 这是一个 div 元素，点击它可以切换全屏 -->
    <div id="fullscreenDiv">
        Click to toggle fullscreen
    </div>

    <script>

      /**
       * 全屏 API 的工作流程
       *
       * 进入全屏：
       * 调用某个元素的 requestFullscreen() 方法，例如 fullscreenDiv.requestFullscreen()。
       * 浏览器会将这个元素设置为全屏状态，并将 document.fullscreenElement 设置为这个元素。
       *
       * 判断是否全屏：
       * 通过 document.fullscreenElement 判断当前是否有元素处于全屏状态。
       * 如果 document.fullscreenElement 不为 null，则表示有元素处于全屏状态。
       *
       * 退出全屏：
       * 调用 document.exitFullscreen() 方法，退出全屏模式。
       * 退出后，document.fullscreenElement 会变为 null。
      */

        // 获取 div 元素
        const fullscreenDiv = document.getElementById('fullscreenDiv');

        // 监听 div 的点击事件，点击时切换全屏
        fullscreenDiv.addEventListener('click', toggleFullscreen);

        /**
         * 监听键盘按键事件 - 这段监听按钮自定义退出全屏的逻辑非必要
         * 因为即使不手动监听 Esc 键，浏览器默认也会在按下 Esc 键时
         * 为什么不需要手动监听 Esc 键？
          浏览器的默认行为：
          ***** 当页面或某个元素进入全屏模式时，浏览器会自动监听 Esc 键。
          按下 Esc 键时，浏览器会自动退出全屏模式，而不需要开发者额外编写代码。
          全屏 API 的设计：
          全屏 API 的设计初衷是让开发者能够控制进入全屏的逻辑，但退出全屏的逻辑通常由浏览器自动处理。
          这是为了确保用户始终能够通过 Esc 键或浏览器提供的其他方式（如按 F11 键）退出全屏模式。
          用户体验的一致性：
          如果每个网站都需要手动实现退出全屏的逻辑，可能会导致不一致的用户体验。
          浏览器通过内置行为确保用户在任何网站中都能通过 Esc 键退出全屏。

          为什么代码中还需要监听 Esc 键？
          虽然浏览器默认会处理 Esc 键退出全屏，但在某些情况下，开发者可能希望在退出全屏时执行一些额外的操作。例如：
          更新页面状态。
          显示提示信息。
          记录用户行为。
        */
        document.addEventListener('keydown', function(event) {
            // 如果按下的是 Esc 键，并且当前有元素处于全屏状态
            if (event.key === 'Escape' && document.fullscreenElement) {
                exitFullscreen(); // 退出全屏
            }
        });

        // 切换全屏的函数
        function toggleFullscreen() {

            /**
             * document.fullscreenElement 是什么？
             * document.fullscreenElement 是浏览器提供的一个属性，用于获取当前处于全屏模式的元素
             * 如果有就返回处于全屏模式的元素，否则返回 null
             * 全屏模式是文档级别的状态,浏览器需要知道当前整个文档中是否有元素处于全屏状态，因此将 fullscreenElement 放在了 document 对象上。
            */
            if (!document.fullscreenElement) {
                enterFullscreen(); // 进入全屏
            } else {
                exitFullscreen(); // 退出全屏
            }
        }

        /**
         * @desc 进入全屏的函数 - 每个元素都可以调用 requestFullscreen() 方法，请求将自己设置为全屏模式。
        */
        function enterFullscreen() {
            // 检查浏览器是否支持标准的全屏 API
            if (fullscreenDiv.requestFullscreen) {
                fullscreenDiv.requestFullscreen(); // 进入全屏
            }
            // 检查 Firefox 浏览器的全屏 API
            else if (fullscreenDiv.mozRequestFullScreen) {
                fullscreenDiv.mozRequestFullScreen();
            }
            // 检查 Chrome、Safari 和 Opera 浏览器的全屏 API
            else if (fullscreenDiv.webkitRequestFullscreen) {
                fullscreenDiv.webkitRequestFullscreen();
            }
            // 检查 IE/Edge 浏览器的全屏 API
            else if (fullscreenDiv.msRequestFullscreen) {
                fullscreenDiv.msRequestFullscreen();
            }
        }

        /**
         * 退出全屏的函数
         * 退出全屏是文档级别的操作，而不是某个元素的操作。
         * 无论哪个元素处于全屏状态，调用 document.exitFullscreen() 都会退出全屏模式。
         * 这是因为浏览器需要确保只有一个元素可以处于全屏状态，退出时不需要指定具体是哪个元素。
        */
        function exitFullscreen() {
            // 检查浏览器是否支持标准的退出全屏 API
            if (document.exitFullscreen) {
                document.exitFullscreen(); // 退出全屏
            }
            // 检查 Firefox 浏览器的退出全屏 API
            else if (document.mozCancelFullScreen) {
                document.mozCancelFullScreen();
            }
            // 检查 Chrome、Safari 和 Opera 浏览器的退出全屏 API
            else if (document.webkitExitFullscreen) {
                document.webkitExitFullscreen();
            }
            // 检查 IE/Edge 浏览器的退出全屏 API
            else if (document.msExitFullscreen) {
                document.msExitFullscreen();
            }
        }
    </script>
</body>
</html>