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

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

报错Permissions check failed TypeError: Permissions check failed

1.1、报错原因可能是:
  1. 文档上下文不安全:尝试在非安全上下文(例如HTTP页面而非HTTPS)调用全屏API,部分现代浏览器对此有限制。
  2. 调用时机不对:在文档加载完成之前或特定元素还未完全渲染到DOM中就尝试将其设置为全屏,也可能导致此错误。
  3. 用户交互要求:根据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的全屏控制逻辑时。

  • 6
    点赞
  • 10
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值