js实现浏览器全屏、退出全屏 -六月初技术站

js实现浏览器全屏、退出全屏

六月初 JavaScipt 2019-07-20 15:26:26

浏览器全屏再后台管理界面中是一个最为常见的小功能，全屏状态下的浏览器界面可以将现有的展示面积扩大。那么在前端代码中我们要如何使用js来实现浏览器的全屏和退出全屏效果呢？

代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
	</head>
	<style>
		a {
			font-weight: bold;
		}
	</style>
	<body>
		<button id="aa" type="button">展开全屏</button>
		<button id="bb" type="button">退出全屏</button>
		<script>
			
			$("#aa").click(function(){
				var el = document.documentElement;
				var rfs = el.requestFullScreen || el.webkitRequestFullScreen ||
					el.mozRequestFullScreen || el.msRequestFullScreen;
				if (rfs) { //typeof rfs != "undefined" && rfs
					rfs.call(el);
				} else if (typeof window.ActiveXObject != "undefined") {
					//for IE，这里其实就是模拟了按下键盘的F11，使浏览器全屏
					var wscript = new ActiveXObject("WScript.Shell");
					if (wscript != null) {
						wscript.SendKeys("{F11}");
					}
				}
			})
			$("#bb").click(function(){
				var el = document;
				var cfs = el.cancelFullScreen || el.webkitCancelFullScreen ||
					el.mozCancelFullScreen || el.exitFullScreen;
				if (cfs) { //typeof cfs != "undefined" && cfs
					cfs.call(el);
				} else if (typeof window.ActiveXObject != "undefined") {
					//for IE，这里和fullScreen相同，模拟按下F11键退出全屏
					var wscript = new ActiveXObject("WScript.Shell");
					if (wscript != null) {
						wscript.SendKeys("{F11}");
					}
				}
			})
		</script>
	</body>
</html>