JS中全屏事件

点击全屏按钮将页面全屏显示，同时全屏按钮替换成退出全屏按钮，点击退出全屏让浏览器页面退出全屏显示。

1.HTML:

2.CSS:

.screen,
.exitscreen,
.renovate {
	width: 22px;
	height: 22px;
}

3.JS：

//绑定全屏事件
document.getElementsByClassName('screen')[0].addEventListener('click', fullScreen)
//取消全屏事件
document.getElementsByClassName('exitscreen')[0].addEventListener('click', fullExit)
//进入全屏
function fullScreen() {
	document.getElementsByClassName("exitscreen")[0].style.display = "block";
	document.getElementsByClassName("screen")[0].style.display = "none";
	var element = document.documentElement; //若要全屏页面中div，var element= document.getElementById("divID");  
	//IE 10及以下ActiveXObject 
	if (window.ActiveXObject) {
		var WsShell = new ActiveXObject('WScript.Shell')
		WsShell.SendKeys('{F11}');
	}
	//HTML W3C 提议  
	else if (element.requestFullScreen) {
		element.requestFullScreen();
	}
	//IE11  
	else if (element.msRequestFullscreen) {
		element.msRequestFullscreen();
	}
	// Webkit (works in Safari5.1 and Chrome 15)  
	else if (element.webkitRequestFullScreen) {
		element.webkitRequestFullScreen();
	}
	// Firefox (works in nightly)  
	else if (element.mozRequestFullScreen) {
		element.mozRequestFullScreen();
	}
}
//退出全屏  
function fullExit() {
	document.getElementsByClassName("exitscreen")[0].style.display = "none";
	document.getElementsByClassName("screen")[0].style.display = "block";
	var element = document.documentElement; //若要全屏页面中div，var element= document.getElementById("divID");   
	//IE ActiveXObject  
	if (window.ActiveXObject) {
		var WsShell = new ActiveXObject('WScript.Shell')
		WsShell.SendKeys('{F11}');
	}
	//HTML5 W3C 提议  
	else if (element.requestFullScreen) {
		document.exitFullscreen();
	}
	//IE 11  
	else if (element.msRequestFullscreen) {
		document.msExitFullscreen();
	}
	// Webkit (works in Safari5.1 and Chrome 15)  
	else if (element.webkitRequestFullScreen) {
		document.webkitCancelFullScreen();
	}
}

4.网页效果

JS全屏