html+js实现F11全屏效果

最新推荐文章于 2021-10-23 11:12:23 发布

元仙僧

最新推荐文章于 2021-10-23 11:12:23 发布

阅读量2.1k

点赞数

分类专栏： javascript 文章标签：全屏 js实现全屏

本文链接：https://blog.csdn.net/weixin_42567389/article/details/97135037

版权

javascript 专栏收录该内容

28 篇文章 4 订阅

订阅专栏

本来想实现进入页面就是全屏的效果，但是并没有实现，onload也不行，有大佬解决的话麻烦告知一下，以下代码实测IE11，chemo，火狐都可以实现全屏。


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<input id="Button1" type="button" value="开始全屏" onclick="kaishi()" />
		<input id="Button2" type="button" value="关闭全屏" onclick="guanbi()" />
		<script>
			function kaishi() {


				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 (elem.msRequestFullscreen) {
					elem.msRequestFullscreen();
				}
			}

			function guanbi() {


				if (document.exitFullscreen) {
					document.exitFullscreen();
				} else if (document.mozCancelFullScreen) {
					document.mozCancelFullScreen();
				} else if (document.webkitCancelFullScreen) {
					document.webkitCancelFullScreen();
				} else if (document.msExitFullscreen) {
					document.msExitFullscreen();
				}
			}




			document.addEventListener("fullscreenchange", function() {

				fullscreenState.innerHTML = (document.fullscreen) ? "" : "not ";
			}, false);



			document.addEventListener("mozfullscreenchange", function() {

				fullscreenState.innerHTML = (document.mozFullScreen) ? "" : "not ";
			}, false);



			document.addEventListener("webkitfullscreenchange", function() {

				fullscreenState.innerHTML = (document.webkitIsFullScreen) ? "" : "not ";
			}, false);

			document.addEventListener("msfullscreenchange", function() {

				fullscreenState.innerHTML = (document.msFullscreenElement) ? "" : "not ";
			}, false);
		</script>
	</body>
</html>