HTML JS全屏和退出全屏

• 全屏方法
• 退出全屏方法
• 调用代码
• 判断全屏
• • 错误的做法
  • 错误分析
  • 正确的做法

全屏方法

function launchIntoFullscreen(element) {
    if(element.requestFullscreen){
        element.requestFullscreen();
    }
    else if(element.mozRequestFullScreen) {
        element.mozRequestFullScreen();
    }
    else if(element.webkitRequestFullscreen) {
        element.webkitRequestFullscreen();
    }
    else if(element.msRequestFullscreen) {
        element.msRequestFullscreen();
    }
}
           

退出全屏方法

function exitFullscreen() {
    if(document.exitFullscreen) {
        document.exitFullscreen();
    } else if(document.mozCancelFullScreen) {
        document.mozCancelFullScreen();
    } else if(document.webkitExitFullscreen) {
        document.webkitExitFullscreen();
    }
}
           

调用代码

var divTest = document.getElementById("time");
launchIntoFullscreen(divTest);
           

判断全屏

错误的做法

function checkFull() {
        var isFull = document.fullscreenEnabled || window.fullScreen || document.webkitIsFullScreen || document.msFullscreenEnabled;
        //to fix : false || undefined == undefined
        if (isFull === undefined) {isFull = false;}
        return isFull;
    }
           

错误分析

以上代码是错的, 错的, 错的. 不晓得都哪里夏吉尔抄;

两个enabled是表示是否禁用了全屏功能, 不能作为最终的全屏与否的结果, 它只能用来提前预判是否能够使用fullScreen和webkitIsFullScreen进行全屏判断. 网上一大堆,抄来抄去的, 都没证实下的.

正确的做法

function checkFull() {
	var isFull = false;
	if (document.fullscreenEnabled || document.msFullscreenEnabled ) {
		isFull = window.fullScreen || document.webkitIsFullScreen;
        if (isFull === undefined) {
			isFull = false;
		}
	}
	return isFull;
}
           

PS:

经测试，在Chrome的69版本中，*

document.fullscreenEnabled

*和

document.msFullscreenEnabled

两个属性属于未定义，下面的正确做法也不适用，而上面的错误做法可行。

修改自: https://www.cnblogs.com/yiven/p/7885528.html