浏览器进入/退出全屏

原创已于 2023-08-08 17:56:34 修改 · 265 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端

于 2022-11-14 12:20:41 首次发布

这段代码展示了如何在不同浏览器中实现进入全屏和退出全屏的功能。通过调用document.documentElement.requestFullscreen()等方法，适配了Firefox、Chrome、IE11等浏览器的全屏API，确保在各种环境下都能正确切换全屏状态。

        // 进入全屏
        enterFullscreen() {
            if (document.documentElement.requestFullscreen) {
                document.documentElement.requestFullscreen();
            }
            //FireFox
            else if (document.documentElement.mozRequestFullScreen) {
                document.documentElement.mozRequestFullScreen();
            }
            //Chrome等
            else if (document.documentElement.webkitRequestFullScreen) {
                document.documentElement.webkitRequestFullScreen();
            }
            //IE11
            else if (document.documentElement.msRequestFullscreen) {
                document.body.msRequestFullscreen();
            }
        },
        // 退出全屏
        exitFullscreen() {
            if (document.fullscreenElement) {
                document.exitFullscreen();
            } else if (document.msFullScreenElement) {
                document.msExitFullscreen();
            } else if (document.mozFullScreenElement) {
                document.mozCancelFullScreen();
            } else if (document.webkitFullscreenElement) {
                document.webkitCancelFullScreen();
            }
        },