前端（一）：实现全屏与非全屏切换的方法

最新推荐文章于 2024-07-19 14:40:55 发布

幺白幺木_

最新推荐文章于 2024-07-19 14:40:55 发布

阅读量715

点赞数 18

分类专栏：前端文章标签：前端

本文链接：https://blog.csdn.net/qq_57724229/article/details/140124980

版权

前端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

实现全屏与非全屏切换的方法

实现全屏与非全屏切换的方法

实现全屏与非全屏切换的方法

效果展示

非全屏效果

在这里插入图片描述

全屏效果

在这里插入图片描述

源码

<body>
    <button onclick="toggleFullScreen()">全屏</button>
    <script>
        // 切换全屏函数
        function toggleFullScreen() {
            if (isFullScreen()) {
                document.body.requestFullscreen();
            } else {
                document.exitFullscreen();
            }
        }

        // 检测页面是否处于全屏模式
        function isFullScreen() {
            return !(document.fullscreenElement || document.mozFullScreenElement || document.webkitFullscreenElement || document.msFullscreenElement);
        }
    </script>
</body>

问题-切换全屏是页面为黑色

解决思路：向body内添加父级容器解决

<body>
    <div id="app">
        <button onclick="toggleFullScreen()">全屏</button>
    </div>
    <script>
        // 切换全屏函数
        function toggleFullScreen() {
            if (isFullScreen()) {
                document.querySelector('#app').requestFullscreen();
            } else {
                document.exitFullscreen();
            }
        }

        // 检测页面是否处于全屏模式
        function isFullScreen() {
            return !(document.fullscreenElement || document.mozFullScreenElement || document.webkitFullscreenElement || document.msFullscreenElement);
        }
    </script>
</body>

扩展-指定容器进行全屏化

效果

非全屏效果

在这里插入图片描述

全屏效果

在这里插入图片描述

源码

<body>
    <button onclick="toggleFullScreen()">全屏</button>
    <div id="box">
        <h1>Hello HYL!!!</h1>
    </div>
    <script>
        // 切换全屏函数
        function toggleFullScreen() {
            if (isFullScreen()) {
                document.querySelector('#box').requestFullscreen();
            } else {
                document.exitFullscreen();
            }
        }

        // 检测页面是否处于全屏模式
        function isFullScreen() {
            return !(document.fullscreenElement || document.mozFullScreenElement || document.webkitFullscreenElement || document.msFullscreenElement);
        }
    </script>
</body>