浏览器相关问题记录(1)— F11全屏相关

前端小小小周 2024-08-19 12:03:02 阅读 59

1、登录之后马上自动进入F11全屏页面

报错Permissions check failed TypeError: Permissions check failed

1.1、报错原因可能是:

文档上下文不安全:尝试在非安全上下文(例如HTTP页面而非HTTPS)调用全屏API,部分现代浏览器对此有限制。调用时机不对:在文档加载完成之前或特定元素还未完全渲染到DOM中就尝试将其设置为全屏,也可能导致此错误。用户交互要求:根据W3C规范,从2018年开始,进入全屏模式必须由用户交互触发(比如点击事件)。如果尝试在没有直接用户交互的情况下(比如页面加载时自动调用)进入全屏,可能会触发权限错误。

根据排查,在我项目中出来的问题是,进入页面自动进入F11全屏模式;

1.2、解决办法:

确保在用户交互后调用:确保你的全屏请求是在用户直接交互(如点击按钮)之后进行的。Vue中,你可以在事件处理器内触发全屏操作。

2、调用全屏API(requestFullscreen)和按下键盘F11进入全屏,浏览器自动弹出的退出逻辑不一致

2.1、出现原因:

涉及到浏览器对于全屏模式的不同实现和处理逻辑。通过调用JavaScript的全屏API(如requestFullscreen)进入全屏时,大多数现代浏览器都会允许通过ESC键退出全屏,这是因为你在代码中显式地控制了全屏的进入和退出逻辑。

然而,当用户直接使用F11键进入全屏模式时,这是浏览器原生的行为,而非由你的JavaScript代码控制。在这种情况下,ESC键的处理逻辑由浏览器自身决定,某些浏览器可能不支持ESC退出全屏,尤其是当F11被用来进入全屏时。

2.2、解决办法:

        1、统一全屏的进入和退出逻辑,确保无论用户是通过F11还是通过你的JavaScript代码进入全屏,都能通过ESC键退出。但遗憾的是,由于F11的行为是浏览器级别的,你无法直接通过前端代码控制F11的全屏进出逻辑。

        2、提示用户使用页面上的按钮(通过你的fullScreen函数)来进入和退出全屏,而不通过F11进入全屏,保证全屏进入和退出逻辑保持一致。

       3、尝试监听键盘事件,在ESC按键被按下时调用document.exitFullscreen()方法退出全屏,但这种方法并不能覆盖所有情况,特别是当浏览器直接接管了F11的全屏控制逻辑时。



声明

本文内容仅代表作者观点,或转载于其他网站,本站不以此文作为商业用途
如有涉及侵权,请联系本站进行删除
转载本站原创文章,请注明来源及作者。