前端页面通过javascript设置全屏-兼容多浏览器前端页面通过javascript设置全屏-兼容多浏览器前端页面通

	<body>
		<button id="fullscreen-toggler">全屏按钮</button>
		<script src="./js/jquery.js"></script>
		<script>
			// 设置全屏
			let flag = false
			document
				.getElementById('fullscreen-toggler')
				.addEventListener('click', function (e) {
					var element = document.documentElement // 返回 html dom 中的root 节点 <html>
					if (!flag) {
						flag = true
						// 判断浏览器设备类型
						if (element.requestFullscreen) {
							element.requestFullscreen()
						} else if (element.mozRequestFullScreen) {
							// 兼容火狐
							element.mozRequestFullScreen()
						} else if (element.webkitRequestFullscreen) {
							// 兼容谷歌
							element.webkitRequestFullscreen()
						} else if (element.msRequestFullscreen) {
							// 兼容IE
							element.msRequestFullscreen()
						}
					} else {
						//  退出全屏
						if (document.exitFullscreen) {
							document.exitFullscreen()
						} else if (document.mozCancelFullScreen) {
							document.mozCancelFullScreen()
						} else if (document.webkitCancelFullScreen) {
							document.webkitCancelFullScreen()
						} else if (document.msExitFullscreen) {
							document.msExitFullscreen()
						}
					}
				})
			复制代码
		</script>
	</body>