当前位置:首页 » 《休闲阅读》 » 正文

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

9 人参与  2024年09月22日 10:00  分类 : 《休闲阅读》  评论

点击全文阅读


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的全屏控制逻辑时。


点击全文阅读


本文链接:http://zhangshiyu.com/post/163013.html

<< 上一篇 下一篇 >>

  • 评论(0)
  • 赞助本站

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

关于我们 | 我要投稿 | 免责申明

Copyright © 2020-2022 ZhangShiYu.com Rights Reserved.豫ICP备2022013469号-1