vue、react、js实现全屏

原创已于 2024-01-04 09:43:37 修改 · 447 阅读

7 ·

CC 4.0 BY-SA版权

文章标签：

#前端

于 2023-12-12 10:31:46 首次发布

本文介绍了如何在JavaScript中检测和控制屏幕的全屏模式，包括使用`requestFullscreen`和`exitFullscreen`方法，以及针对IE浏览器的`msRequestFullscreen`和`msExitFullscreen`方法，确保在不同浏览器环境下实现全屏功能的兼容性。

const screen = () => {
    // 判断屏幕状态
    let fullScreen = document.fullscreenElement;
    if (!fullScreen) {
        // 开启全屏
        document.documentElement.requestFullscreen();
    } else {
        // 关闭全屏
        document.exitFullscreen();
    }
}

兼容IE浏览器的

const screen = () => {
    // 判断屏幕状态
    let element=document.documentElement;
    if(element.requestFullscreen){
        // 标准浏览区
        if(!document.fullscreenElement){
            element.requestFullscreen();
        }else{
            document.exitFullscreen();
        }
    }else if(element.msRequestFullscreen){
        // IE浏览器
        if(!document.msFullscreenElement){
            element.msRequestFullscreen();
        }else{
            document.msExitFullscreen();
        }
    }
}