说到用 JavaScript 实现页面元素全屏,核心其实就一句话:调用浏览器提供的 Element.requestFullscreen() 方法,它能让指定 DOM 元素进入全屏模式。不过,这背后有几个关键点值得留意。比如,不是所有元素都默认支持全屏——像 就需要单独加上 allowfullscreen 属性,而且必须由用户手势触发(比如点击事件),不能悄无声息地自动调用。如果违背这些规则,浏览器会直接忽略请求。

确保元素支持全屏并正确调用
只有可渲染的、非内联的元素(比如 div、video、canvas)才能进入全屏。调用前最好检查一下元素是否存在,并捕获可能的错误——比如被浏览器策略阻止。这里有几个要点:
- 用
element.requestFullscreen()发起请求,这是现代标准写法。 - 考虑兼容旧版浏览器,可以加上前缀:
element.webkitRequestFullscreen()、element.mozRequestFullScreen()、element.msRequestFullscreen()。 - 调用必须在用户手势(如
click、touchend)中,否则会被静默忽略。
监听全屏状态变化并响应
全屏进入或退出时,会触发全局事件 fullscreenchange;如果出错,则触发 fullscreenerror。推荐监听 document 对象,这样可以统一处理全屏状态变化。具体操作上:
- 通过
document.fullscreenElement判断当前哪个元素处于全屏(返回null表示未全屏)。 - 在回调中更新 UI,比如切换“退出全屏”按钮的文案。
fullscreenerror事件通常由权限问题或非法调用触发,适合用来打日志或提示用户重试。
退出全屏的两种方式
退出全屏很简单:用户按 ESC 键,或者脚本主动调用 document.exitFullscreen()。需要注意的是,兼容性写法同样存在:
- 标准写法:
document.exitFullscreen()。 - 兼容写法:
document.webkitExitFullscreen()、document.mozCancelFullScreen()、document.msExitFullscreen()。 - 调用前最好判断一下
document.fullscreenElement !== null,避免无意义的调用。
样式适配与注意事项
全屏状态下,浏览器会为全屏元素添加伪类 :fullscreen,利用它我们可以定制样式(比如隐藏滚动条、调整背景色)。例如:
- CSS 中写
div:fullscreen { width: 100vw; height: 100vh; }可让元素撑满视口。 - 注意移动端 Safari 对
requestFullscreen()的支持有限,元素的全屏更可靠。 - 全屏后
document.body的滚动会被禁用,如果需要滚动内容,应该在全屏元素内部自行处理。
