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

控制浏览器全屏

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

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

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

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;            
    }
}