正确使用进入全屏/退出全屏-全屏监听功能

吃柠檬的猫

已于 2023-04-19 09:43:53 修改

阅读量1.9k

点赞数

分类专栏：前端文章标签：前端

于 2022-03-16 15:30:28 首次发布

本文链接：https://blog.csdn.net/weixin_43222302/article/details/123527424

版权

前端专栏收录该内容

39 篇文章

订阅专栏

这篇博客讨论了如何准确判断网页全屏状态，指出使用`document.fullscreenElement`存在漏洞，特别是在浏览器工具栏全屏时。作者提供了一个解决方案，通过比较`window.screen.availHeight`和`window.screen.height`来检测全屏变化，并给出了全屏切换的JS函数`toggleScreen`。此外，还介绍了监听全屏状态变化和拦截F11键实现全屏切换的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

全屏这个当时需要了解一些参数变化，看了一些文章，现状就是有些文章复制就复制吧，还不靠谱,我不敢保证一定没问题，但我自己试过了方案
更新了一次方案，解决了网页缩放后判断错误的问题

// 全屏触发器
document.fullscreenElement就表面意思，全屏的元素，===null就表示没有全屏的元素，fullscreen什么的别用了，已经列入弃用名单了
用fullscreenElement来判断是否全屏，其实有漏洞，使用浏览器工具栏的全屏按钮，fullscreenElement等其他属性都无法识别已经全屏，如果不介意这个话的fullscreenElement可以很好的使用
但我后面琢磨出了下面的方案来处理这个场景
window.screen.availHeight：是当前屏幕有效高度
window.screen.height：当前屏幕最大高度
注意：使用浏览器的全屏按钮触发，无法使用js代码的方法去关闭全屏，这就离谱，
只能让用户使用f11去关闭或者浏览器自带的关闭图标,另外需要拦截f11的按键替换成toggleScreen去全屏
function toggleScreen() {
		try {
		let availHeight = window.screen.availHeight;
		let screenHeight = window.screen.height;
			if (availHeight === screenHeight ) {
				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 availHeight = window.screen.availHeight;
		let screenHeight = window.screen.height;
	console.log(availHeight !== screenHeight ?'退出全屏':'进入全屏')
};