html5全屏(Fullscreen)

最新推荐文章于 2025-06-20 20:11:05 发布

原创最新推荐文章于 2025-06-20 20:11:05 发布 · 4.7k 阅读

2 ·

CC 4.0 BY-SA版权

javascript 专栏收录该内容

82 篇文章

订阅专栏

本文介绍了一个使用HTML和JavaScript实现的全屏功能代码片段，详细展示了如何通过不同的浏览器API来控制网页的全屏显示状态，包括进入和退出全屏的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

      <div class="btn-fullscreen" @click="handleFullScreen">
                    <el-tooltip effect="dark" :content="fullscreen?`取消全屏`:`全屏`" placement="bottom">
                        <i class="el-icon-rank"></i>
                    </el-tooltip>
       </div>

            // 全屏事件
            handleFullScreen(){
                let element = document.documentElement;
                if (this.fullscreen) {
                    if (document.exitFullscreen) {
                        document.exitFullscreen();
                    } else if (document.webkitCancelFullScreen) {
                        document.webkitCancelFullScreen();
                    } else if (document.mozCancelFullScreen) {
                        document.mozCancelFullScreen();
                    } else if (document.msExitFullscreen) {
                        document.msExitFullscreen();
                    }
                } else {
                    if (element.requestFullscreen) {
                        element.requestFullscreen();
                    } else if (element.webkitRequestFullScreen) {
                        element.webkitRequestFullScreen();
                    } else if (element.mozRequestFullScreen) {
                        element.mozRequestFullScreen();
                    } else if (element.msRequestFullscreen) {
                        // IE11
                        element.msRequestFullscreen();
                    }
                }
                this.fullscreen = !this.fullscreen;
            }