如何利用 JavaScript 实现页面元素全屏展示

JavaScript 实现页面元素全屏需调用 Element.requestFullscreen()（兼容写法含前缀），必须由用户手势触发，仅支持可渲染非内联元素；通过 document.fullscreenElement 判断状态，监听 fullscreenchange 和 fullscreenerror 事件；退出用 document.exitFullscreen()；CSS 可用 :fullscreen 伪类适配样式。

使用 JavaScript 实现页面元素全屏展示，核心是调用浏览器提供的 Element.requestFullscreen() 方法，它能让指定 DOM 元素进入全屏模式。注意不是所有元素都默认支持全屏（比如 <iframe> 需要 allowfullscreen 属性），且需用户主动触发（如点击事件），不能自动调用。

确保元素支持全屏并正确调用

只有可渲染的、非内联的元素（如 div、video、canvas）才能进入全屏。调用前建议检查元素是否存在，并捕获可能的错误（例如被浏览器策略阻止）：

• 用 element.requestFullscreen() 发起请求（现代标准写法）
• 兼容旧版可加前缀：element.webkitRequestFullscreen()、element.mozRequestFullScreen()、element.msRequestFullscreen()
• 必须在用户手势（如 click、touchend）中调用，否则会被静默忽略

监听全屏状态变化并响应

全屏进入或退出时，会触发全局事件 fullscreenchange；出错时触发 fullscreenerror。推荐监听 document：

• 通过 document.fullscreenElement 判断当前哪个元素处于全屏（返回 null 表示未全屏）
• 可在回调中更新 UI，比如切换“退出全屏”按钮文案
• fullscreenerror 通常因权限问题或非法调用触发，适合打日志或提示用户重试

退出全屏的两种方式

退出全屏既可通过用户按 ESC 键，也可由脚本控制：

立即学习“Java免费学习笔记（深入）”；

• 调用 document.exitFullscreen()（现代标准）
• 兼容写法：document.webkitExitFullscreen()、document.mozCancelFullScreen()、document.msExitFullscreen()
• 调用前建议判断 document.fullscreenElement !== null，避免无意义调用

样式适配与注意事项

全屏状态下，浏览器会为全屏元素添加伪类 :fullscreen，可用于定制样式（如隐藏滚动条、调整背景色）：

• CSS 中写 div:fullscreen { width: 100vw; height: 100vh; } 可撑满视口
• 注意移动端 Safari 对 requestFullscreen() 支持有限，<video> 全屏更可靠
• 全屏后 document.body 的滚动会被禁用，若需滚动内容，应在全屏元素内部处理