js页面全屏显示功能

今天接到一个需求要求全屏显示内容，我现在实现的是浏览器全屏显示内容。

1. 首先去layui拿2个图标，全屏和取消全屏的图标代码引用

CSS代码

.admin-side-full {
	position: absolute;
	cursor: pointer;
	z-index: 19940201;
	left: 28px;
	color: white;
	text-align: center;
	width: 30px;
	height: 30px;
	line-height: 30px;
	top: 25%;
}

<li class="admin-side-full">
	<i class="layui-icon layui-icon-screen-full" style="color: #eeeeee;" onclick="showFullScreen()" id="fullScreen"></i>
	<i class="layui-icon layui-icon-screen-restore" style=" color: #eeeeee;" onclick="closeFullScreen()" id="notFullScreen"></i>
</li>

2. 编写全屏、取消全屏以及监听全屏代码

<script type="text/javascript">
	// 全屏显示
		function showFullScreen(){
			if (!document.fullscreenElement &&!document.mozFullScreenElement
					&& !document.webkitFullscreenElement &&!document.msFullscreenElement) {
				if (document.documentElement.requestFullscreen) {
					document.documentElement.requestFullscreen();
				} else if (document.documentElement.msRequestFullscreen) {
					document.documentElement.msRequestFullscreen();
				} else if (document.documentElement.mozRequestFullScreen) {
					document.documentElement.mozRequestFullScreen();
				} else if (document.documentElement.webkitRequestFullscreen) {
					document.documentElement.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT);
				}
			}
		}

		// 取消全屏
		function closeFullScreen(){
			if (document.fullscreenElement != null) {
				if (document.exitFullscreen) {
					document.exitFullscreen();
				} else if (document.msExitFullscreen) {
					document.msExitFullscreen();
				} else if (document.mozCancelFullScreen) {
					document.mozCancelFullScreen();
				} else if (document.webkitExitFullscreen) {
					document.webkitExitFullscreen();
				}
			}
		}

		//全屏判断
		function isFullscreen(){
			return document.fullscreenElement || document.msFullscreenElement || document.mozFullScreenElement || document.webkitFullscreenElement || false;
		}

		//监听退出全屏事件
		window.onresize = function() {
			if (!isFullscreen()) {
				$('#fullScreen').show();
				$('#notFullScreen').hide();
			} else {
				$('#fullScreen').hide();
				$('#notFullScreen').show();
			}
		}
</script>

以上就是全屏、取消全屏功能实现
全屏：

取消全屏：