优化了自制的浏览器主页的全屏功能

第一次修改

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>全屏功能</title>
    <style>
        #fullBtn .icon {
            width: 35px;
            margin-top: 5px;
        }

        #fullBtn .shrink {
            display: none;
        }
    </style>
</head>

<body>
    <div id="fullBtn" class="divBtn">
        <!-- 全屏 -->
        <span class="fullScreen">
            <svg t="1719287647055" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
                p-id="11666" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200">
                <path
                    d="M0 0v1024h1024V0z m409.6 921.6H102.4v-307.2h102.4v204.8h204.8zM409.6 204.8H204.8v204.8H102.4V102.4h307.2z
                         m512 614.4v102.4h-307.2v-102.4h204.8v-204.8h102.4z m0-614.4v204.8h-102.4V204.8h-204.8V102.4h307.2z"
                    fill="#333333" p-id="11667"></path>
            </svg>
        </span> <!-- 全屏 结束-->
        <!-- 收缩 -->
        <span class="shrink">
            <svg t="1719288607653" class="icon" viewBox="0 0 1025 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
                p-id="14512" xmlns:xlink="http://www.w3.org/1999/xlink" width="200.1953125" height="200">
                <path d="M884.5 59c44.459 0 80.5 36.041 80.5 80.5v745c0 
                       44.459-36.041 80.5-80.5 80.5h-745C95.041 965 59 928.959 59 884.5v-745C59 
                       95.041 95.041 59 139.5 59h745z m-52.752 520.492H578.492v252.4l0.007 0.587c0.312 13.471 
                       11.33 24.296 24.876 24.296l0.587-0.007c13.471-0.312 24.296-11.33 24.296-24.876l-0.003-167.448 
                       208.267 208.268 0.468 0.455c9.748 9.26 25.159 9.108 34.722-0.455 9.717-9.717 9.717-25.472 0-35.19L663.446 
                       629.257h168.302l0.587-0.006c13.471-0.312 24.296-11.33 24.296-24.876 0-13.742-11.14-24.883-24.883-24.883z 
                       m-382.537 0H195.68l-0.588 0.007c-13.47 0.312-24.295 11.33-24.295 24.876l0.007 0.587c0.312 13.471 11.33 
                       24.296 24.876 24.296l165.877-0.001L162.893 828.76l-0.454 0.468c-9.239 9.769-9.055 25.179 0.528 34.722 
                       9.738 9.697 25.493 9.663 35.19-0.074l201.288-202.139v170.605l0.008 0.587c0.312 13.471 11.33 24.295 24.876 
                       24.295 13.742 0 24.882-11.14 24.882-24.882v-252.85z m422.464-427.241c-9.738-9.697-25.493-9.664-35.19 
                       0.074l-208.23 209.108 0.003-172.41-0.007-0.587c-0.312-13.471-11.33-24.295-24.876-24.295-13.742 0-24.883 
                       11.14-24.883 24.882v253.384h253.099l0.587-0.007c13.471-0.312 24.295-11.33 
                       24.295-24.876l-0.006-0.587c-0.312-13.471-11.33-24.295-24.876-24.295l-164.181-0.001 204.339-205.2 
                       0.454-0.469c9.24-9.768 9.055-25.178-0.528-34.721z m-686.14-0.86c-9.769-8.81-24.838-8.512-34.247 0.897-9.717 
                       9.717-9.717 25.472 0 35.19l204.736 204.736-160.344 0.001-0.588 0.007c-13.47 0.312-24.295 11.33-24.295 24.876 
                       0 13.742 11.14 24.883 24.883 24.883h253.503V189.023l-0.006-0.587c-0.312-13.471-11.33-24.295-24.876-24.295l-0.588 
                       0.006c-13.47 0.312-24.295 11.33-24.295 24.876l-0.002 176.203-212.938-212.938-0.468-0.455z"
                    fill="#333333" p-id="14513">
                </path>
            </svg>
        </span>
        <!-- 收缩 结束-->
    </div>
    <script>
        // 定义一个窗口加载完毕后的回调函数。
        window.onload = () => {
            // 页面内容加载完成后执行
            // 获取网页中 ID 为 fullBtn 的元素。
            const fullBtn = document.getElementById("fullBtn");
            // 获取 fullBtn 元素中的类名为 fullScreen 的第一个子元素。
            const fullScreen = fullBtn.querySelector(".fullScreen");
            // 获取 fullBtn 元素中的 类名为 shrink的第一个子元素。
            const shrink = fullBtn.querySelector(".shrink");
            // 给全屏按钮添加点击事件监听器
            fullBtn.addEventListener("click", function () {
                if (!document.fullscreenElement) {
                    // 如果当前不是全屏状态，则调用开启全屏的函数
                    openFullscreen();
                    // 切换按钮的显示状态
                    toggleButtons();
                } else {
                    // 如果当前是全屏状态，则调用关闭全屏的函数
                    closeFullscreen();
                    // 切换按钮的显示状态
                    toggleButtons();
                }
            });
            // 切换按钮的显示状态
            // 1. 函数定义
            function toggleButtons() {
                // 2. 切换类名 "shrink" 和 "fullScreen"
                // 对 fullScreen 元素（全屏按钮）的类列表进行处理。
                // 如果 fullScreen 元素没有 shrink 类，则添加该类；
                // 如果 fullScreen 元素有 shrink 类，则移除该类。
                fullScreen.classList.toggle("shrink");
                // 对 shrink 元素（收缩按钮）的类列表进行处理。
                // 如果 shrink 元素没有 shrink 类，则添加该类；
                // 如果 shrink 元素有 shrink 类，则移除该类。
                shrink.classList.toggle("shrink");
            }
            // 开启全屏功能
            function openFullscreen() {
                // 获取文档的根元素 (HTML 元素)
                const docElm = document.documentElement;
                // 检查当前浏览器是否支持 requestFullscreen 方法
                if (docElm.requestFullscreen) {
                    // 调用 requestFullscreen 方法以启动全屏模式
                    docElm.requestFullscreen();
                } else if (docElm.mozRequestFullScreen) { // 适用于 Mozilla Firefox
                    // 调用 Firefox 的专有全屏方法
                    docElm.mozRequestFullScreen();
                } else if (docElm.webkitRequestFullScreen) { // 适用于 Chrome, Safari, 和 Opera
                    // 调用 Webkit 内核浏览器（Chrome, Safari, Opera）的专有全屏方法
                    docElm.webkitRequestFullScreen();
                } else if (docElm.msRequestFullscreen) { // 适用于 IE/Edge
                    // 调用 Microsoft Edge 和的专有全屏方法
                    docElm.msRequestFullscreen();
                }
            }
            // 关闭全屏功能
            function closeFullscreen() {
                // 检查当前浏览器是否支持 exitFullscreen 方法
                if (document.exitFullscreen) {
                    // 调用 exitFullscreen 方法以退出全屏模式
                    document.exitFullscreen();
                } else if (document.mozCancelFullScreen) { // 适用于 Mozilla Firefox
                    // 调用 Firefox 的专有退出全屏方法
                    document.mozCancelFullScreen();
                } else if (document.webkitExitFullscreen) { // 适用于 Chrome, Safari, 和 Opera
                    // 调用 Webkit 内核浏览器（Chrome, Safari, Opera）的专有退出全屏方法
                    document.webkitExitFullscreen();
                } else if (document.msExitFullscreen) { // 适用于 IE/Edge
                    // 调用 Microsoft Edge 和的专有退出全屏方法
                    document.msExitFullscreen();
                }
            }
        }
        // 全屏功能优化结束
    </script>
</body>

</html>

第二次修改减少代码量

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>全屏功能</title>
    <style>
        #fullBtn {
            .icon {
                width: 35px;
                margin-top: 5px;
            }

            .shrink {
                display: none;
            }
        }
    </style>
</head>

<body>
    <div id="fullBtn" class="divBtn">
        <span class="fullScreen">
            <svg class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" width="200"
                height="200">
                <path
                    d="M0 0v1024h1024V0z m409.6 921.6H102.4v-307.2h102.4v204.8h204.8zM409.6 204.8H204.8v204.8H102.4V102.4h307.2z m512 614.4v102.4h-307.2v-102.4h204.8v-204.8h102.4z m0-614.4v204.8h-102.4V204.8h-204.8V102.4h307.2z"
                    fill="#333333"></path>
            </svg>
        </span>
        <span class="shrink">
            <svg class="icon" viewBox="0 0 1025 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" width="200"
                height="200">
                <path
                    d="M884.5 59c44.459 0 80.5 36.041 80.5 80.5v745c0 44.459-36.041 80.5-80.5 80.5h-745C95.041 965 59 928.959 59 884.5v-745C59 95.041 95.041 59 139.5 59h745z m-52.752 520.492H578.492v252.4l0.007 0.587c0.312 13.471 11.33 24.296 24.876 24.296l0.587-0.007c13.471-0.312 24.296-11.33 24.296-24.876l-0.003-167.448 208.267 208.268 0.468 0.455c9.748 9.26 25.159 9.108 34.722-0.455 9.717-9.717 9.717-25.472 0-35.19L663.446 629.257h168.302l0.587-0.006c13.471-0.312 24.296-11.33 24.296-24.876 0-13.742-11.14-24.883-24.883-24.883z m-382.537 0H195.68l-0.588 0.007c-13.47 0.312-24.295 11.33-24.295 24.876l0.007 0.587c0.312 13.471 11.33 24.296 24.876 24.296l165.877-0.001L162.893 828.76l-0.454 0.468c-9.239 9.769-9.055 25.179 0.528 34.722 9.738 9.697 25.493 9.663 35.19-0.074l201.288-202.139v170.605l0.008 0.587c0.312 13.471 11.33 24.295 24.876 24.295 13.742 0 24.882-11.14 24.882-24.882v-252.85z m422.464-427.241c-9.738-9.697-25.493-9.664-35.19 0.074l-208.23 209.108 0.003-172.41-0.007-0.587c-0.312-13.471-11.33-24.295-24.876-24.295-13.742 0-24.883 11.14-24.883 24.882v253.384h253.099l0.587-0.007c13.471-0.312 24.295-11.33 24.295-24.876l-0.006-0.587c-0.312-13.471-11.33-24.295-24.876-24.295l-164.181-0.001 204.339-205.2 0.454-0.469c9.24-9.768 9.055-25.178-0.528-34.721z m-686.14-0.86c-9.769-8.81-24.838-8.512-34.247 0.897-9.717 9.717-9.717 25.472 0 35.19l204.736 204.736-160.344 0.001-0.588 0.007c-13.47 0.312-24.295 11.33-24.295 24.876 0 13.742 11.14 24.883 24.883 24.883h253.503V189.023l-0.006-0.587c-0.312-13.471-11.33-24.295-24.876-24.295l-0.588 0.006c-13.47 0.312-24.295 11.33-24.295 24.876l-0.002 176.203-212.938-212.938-0.468-0.455z"
                    fill="#333333"></path>
            </svg>
        </span>
    </div>
    <script>
        // 定义一个窗口加载完毕后的回调函数。
        window.onload = () => {
            // 页面内容加载完成后执行
            // 获取网页中 ID 为 fullBtn 的元素。
            const fullBtn = document.getElementById("fullBtn");
            // 获取 fullBtn 元素中的类名为 fullScreen 的第一个子元素。
            const fullScreen = fullBtn.querySelector(".fullScreen");
            // 获取 fullBtn 元素中的 类名为 shrink的第一个子元素。
            const shrink = fullBtn.querySelector(".shrink");
            // fullBtn 元素添加了一个点击事件监听器。当 fullBtn 被点击时，会触发随后的回调函数
            fullBtn.addEventListener("click", () => {
                // 检测全屏状态:
                if (!document.fullscreenElement) {
                    // 请求全屏:
                    // requestFullscreen 是标准方法。
                    document.documentElement.requestFullscreen?.() ||
                        // mozRequestFullScreen 是针对 Firefox 浏览器的实现。
                        document.documentElement.mozRequestFullScreen?.() ||
                        // webkitRequestFullScreen 是针对旧版 Chrome 和 Safari 浏览器的实现。
                        document.documentElement.webkitRequestFullScreen?.() ||
                        // msRequestFullscreen 是针对 Internet Explorer 浏览器的实现。
                        document.documentElement.msRequestFullscreen?.();
                    // 退出全屏:
                } else {
                    // exitFullscreen 是标准方法。
                    document.exitFullscreen?.() ||
                        // mozCancelFullScreen 是 Firefox 专有方法。
                        document.mozCancelFullScreen?.() ||
                        // webkitExitFullscreen 是旧版 Chrome 和 Safari 浏览器的实现。
                        document.webkitExitFullscreen?.() ||
                        // msExitFullscreen 是 IE/Edge 的实现。
                        document.msExitFullscreen?.();
                }
                // 对 fullScreen 元素（全屏按钮）的类列表进行处理。
                // 如果 fullScreen 元素没有 shrink 类，则添加该类；
                // 如果 fullScreen 元素有 shrink 类，则移除该类。
                fullScreen.classList.toggle("shrink");
                // 对 shrink 元素（收缩按钮）的类列表进行处理。
                // 如果 shrink 元素没有 shrink 类，则添加该类；
                // 如果 shrink 元素有 shrink 类，则移除该类。
                shrink.classList.toggle("shrink");
            });
        };
    </script>
</body>

</html>