h5页面实现开启真全屏模式,兼容版本

这篇文章将会分享一种具有良好兼容性的js全屏方法

全屏

// 兼容配置
const fullScreenMap = {
	fullscreenchange:"fullscreen",
	webkitfullscreenchage:"webkitIsFullScreen",
	mozfullscreenchange:"mozFullScreen",
	msfullscreenchange:"msFullscreenElement",
}

const html = document.documentElement;
const fullScreen = html.requestFullScreen || 
					html.webkitRequestFullScreen || 
					html.mozRequestFullScreen || 
					html.msRequestFullScreen;

// 如果全屏的方法存在,那么执行全屏操作
if(!!fullScreen && typeof fullScreen != "undefined"){
	fullScreen.call(html);
}else if(typeof window.ActiveXObject !== "undefined"){
	// 否则通过操作F11键的功能来实现全屏
	const wscript = new ActiveXObject("WScript.Shell");
	if(!!wscript){
		wscript.SendKeys("{F11}");
	}
}

Object.entries(fullScreenMap)
	.forEach(([key,value]) => {
		document.addEventListener(key, () => {
			if(document[value]){
				// 全屏后需要执行的操作
				/**
				*	这里你可以执行更改状态的方式,一并隐藏自己页面的工具栏之类多余
				*	的一些组件或者元素,配合全屏可以使你需要操作的区域更加宽阔
				*/
			}else{
				// 退出全屏后需要执行的操作
			}
		})
	})