杜郎俊赏 - dujun.io

全屏事件触发 resize 事件

我之前发现播放视频时进入全屏会闪退。奇怪的是 Chrome 和 Firefox 存在这个问题,但 Safari 正常。正因为如此对我造成了误导,没有找到问题所在。直到今天发现了这个乌龙。

拖动改变浏览器窗口大小时会造成图文排版变形,所以我监听到 resize 事件就会重新渲染页面——表现之一就是视频进入全屏时“闪退”成了非全屏窗口,video 元素被清除了,重新渲染为缩略图 img。

那么解决这个问题就是监听到 resize 事件时增加一个判断是否全屏。

is_fullscreen = () => !!(
    document.fullscreenElement
    || document.mozFullScreenElement
    || document.webkitFullscreenElement
    || document.msFullscreenElement
)

标签: 前端
日期:2024-10-25