【JS】兼容 -JS控制浏览器全屏操作

最新推荐文章于 2024-09-02 19:10:49 发布

锋利的绵羊

最新推荐文章于 2024-09-02 19:10:49 发布

阅读量408

点赞数

分类专栏： JavaScript 文章标签： javascript html5

本文链接：https://blog.csdn.net/qq_37012965/article/details/104746441

版权

JavaScript 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

控制浏览器全屏

requestFullScreen() 开启全屏显示
cancelFullScreen() 退出全屏显示
fullScreenElement 判断当前全屏状态

函数和属性需要根据浏览器添加不同的前缀

浏览器	前缀
chrome	webkit
firefox	moz
ie	ms
opera	o

1.全屏

需要一个dom元素来调用，将选中的元素全屏显示

// 全屏操作
window._RequestFullScreen = (dom) => {
    if(dom.requestFullScreen){
        dom.requestFullScreen();
    }
    else if(dom.webkitRequestFullScreen){
        dom.webkitRequestFullScreen();
    }
    else if(dom.mozRequestFullScreen){
        dom.mozRequestFullScreen();
    }
    else if(dom.msRequestFullScreen){
        dom.msRequestFullScreen();
    }
}

2.退出全屏

通过document实现

// 退出全屏
window._cancelFullScreen = () => {
    if(document.cancelFullScreen){
        document.cancelFullScreen();
    }
    else if(document.webkitCancelFullScreen){
        document.webkitCancelFullScreen();
    }
    else if(document.mozCancelFullScreen){
        document.mozCancelFullScreen();
    }
    else if(document.msCancelFullScreen){
        document.msCancelFullScreen();
    }
}

3.判断当前全屏状态

通过document来实现

// 判断是否是全屏状态
window._fullScreenType = () => {
    if(document.fullscreenElement || document.webkitFullscreenElement || document.mozFullScreenElement || document.msFullscreenElement){
        return true;
    }
    else{
        return false;            
    }
}