[JavaScript知识库]正确使用进入全屏/退出全屏-全屏监听功能

全屏这个当时需要了解一些参数变化，看了一些文章，现状就是有些文章复制就复制吧，还不靠谱,

// 全屏触发器
document.fullscreenElement就表面意思，全屏的元素，===null就表示没有全屏的元素，fullscreen什么的别用了，已经列入弃用名单了
用fullscreenElement来判断是否全屏，其实有漏洞，使用谷歌上的全屏按钮，fullscreenElement等其他属性都无法识别已经全屏，所以我后面琢磨出了下面的方案
window.screen.height：是当前屏幕全屏下高度
document.body.clientHeight：当前页面高度，如果你是全屏的局部元素就更换一下元素就行了，当全屏时这两个高度会保持一致
注意：使用浏览器的全屏按钮触发，无法使用js代码的方法去关闭全屏，这就离谱，只能让用户使用f11去关闭或者浏览器自带的关闭图标,另外需要拦截f11的按键替换成toggleScreen去全屏
function toggleScreen() {
		try {
		let screenH = window.screen.height;
		let bodyH = document.body.clientHeight;
			if (screenH  === bodyH) {
				const elem = parent.document;
				elem.webkitCancelFullScreen
					? elem.webkitCancelFullScreen()
					: elem.mozCancelFullScreen
					? elem.mozCancelFullScreen()
					: elem.cancelFullScreen
					? elem.cancelFullScreen()
					: elem.msExitFullscreen
					? elem.msExitFullscreen()
					: elem.exitFullscreen
					? elem.exitFullscreen()
					: alert('切换失败,可尝试Esc退出');
			} else {
				const elem = document.body;
				elem.webkitRequestFullScreen
					? elem.webkitRequestFullScreen()
					: elem.mozRequestFullScreen
					? elem.mozRequestFullScreen()
					: elem.msRequestFullscreen
					? elem.msRequestFullscreen()
					: elem.requestFullScreen
					? elem.requestFullScreen()
					: alert('浏览器不支持全屏');
			}
		} catch (error) {
			console.log(error);
		}
	}

全屏状态监听，onfullscreenchange什么的我用了，没任何反应

// 拦截f11全屏
window.addEventListener('keydown', function (e) {
	e = e || window.event;
	if (e.keyCode === 122) {
		e.preventDefault();
		triggerScreenFn();
	}
});
// 全屏监听
window.onresize = () => {
        let screenH = window.screen.height;
		let bodyH = document.body.clientHeight;
	console.log(screenH  !== bodyH ?'退出全屏':'进入全屏')
};