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

这篇博客讨论了如何准确判断网页全屏状态,指出使用`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 ?'退出全屏':'进入全屏')
};
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值