JavaScript控制浏览器全屏及各种浏览器全屏模式的方法、属性和事件

时间:2022-01-22 19:09:52

实现全屏

个人版:
function isFullScreen() {
var fullscreenElement = document.fullscreenElement || document.webkitFullscreenElement || document.mozFullScreenElement || document.webkitIsFullScreen || document.mozFullScreen;
if (fullscreenElement) {
//退出全屏
if(document.webkitExitFullscreen) {
document.webkitExitFullscreen();
}else if(document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if(document.exitFullscreen) {
document.exitFullscreen();
}else if (document.msRequestFullscreen) {
document.msRequestFullscreen();
}
}else {
//全屏
launchFullScreen();
}
};
//封装函数,控制全屏
function launchFullScreen() {
var element = document.documentElement;
if(element.requestFullscreen) {
element.requestFullscreen();
} else if(element.mozRequestFullScreen) {
element.mozRequestFullScreen();
} else if(element.webkitRequestFullScreen) {
element.webkitRequestFullScreen();
}else if (document.msExitFullscreen) {
document.msExitFullscreen();
}
};
/**
* 监听全屏状态变化
*/
document.addEventListener('fullscreenchange', Fn);
document.addEventListener('webkitfullscreenchange', Fn);
document.addEventListener('mozfullscreenchange', Fn);
document.addEventListener('msfullscreenchange', Fn);
function Fn() {
var fullscreenElement = document.fullscreenElement || document.webkitFullscreenElement || document.mozFullScreenElement || document.webkitIsFullScreen || document.mozFullScreen;
//全屏按钮切换类
if (fullscreenElement) {
//目前全屏
}else {
//目前不是全屏
}
}
付老师版:
full.onclick=function() {
    if(isFullScreen) {
        isFullScreen = false
        if (document.exitFullscreen) {  
            document.exitFullscreen();  
        }  
        else if (document.mozCancelFullScreen) {  
            document.mozCancelFullScreen();  
        }  
        else if (document.webkitCancelFullScreen) {  
            document.webkitCancelFullScreen();  
        }
        else if (document.msExitFullscreen) {
              document.msExitFullscreen();
        }
    } else {
        isFullScreen = true
        var docElm = document.documentElement;
        //W3C  
        if (docElm.requestFullscreen) {  
            docElm.requestFullscreen();  
        }
        //FireFox  
        else if (docElm.mozRequestFullScreen) {  
            docElm.mozRequestFullScreen();  
        }
        //Chrome等  
        else if (docElm.webkitRequestFullScreen) {  
            docElm.webkitRequestFullScreen();  
        }
        //IE11
        else if (docElm.msRequestFullscreen) {
          docElm.msRequestFullscreen();
        }
    }
}
/**
 * 监听全屏状态变化
 */
 document.addEventListener('fullscreenchange', fullScreenChangeFn);
 document.addEventListener('webkitfullscreenchange', fullScreenChangeFn);
 document.addEventListener('mozfullscreenchange', fullScreenChangeFn);
 document.addEventListener('msfullscreenchange', fullScreenChangeFn);  // IE下无效果然
 /**
  * 监听屏幕变化的函数
  */
 function fullScreenChangeFn(){
     /*
     * 获取被全屏的元素,没有返回null
     * document.fullscreenElement
     * document.webkitFullscreenElement
     * document.mozFullScreenElement
     * 
     * 返回是否全屏·布尔值
     * document.webkitIsFullScreen
     * document.mozFullScreen
     * */
     
     // 判断是否是全屏
     var  isFull = document.fullscreenElement || document.webkitFullscreenElement || document.mozFullScreenElement || document.webkitIsFullScreen || document.mozFullScreen;
     if (isFull) {
         // 全屏状态
     } else {
         // 非全屏状态  
     }
 }