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

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

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

只有可渲染的、非内联的元素（比如 div、video、canvas）才能进入全屏。调用前最好检查一下元素是否存在，并捕获可能的错误——比如被浏览器策略阻止。这里有几个要点：

• 用 element.requestFullscreen() 发起请求，这是现代标准写法，也是 JavaScript 全屏 API 的核心。
• 考虑兼容旧版浏览器，可以加上前缀：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 的滚动会被禁用，如果需要滚动内容，应该在全屏元素内部自行处理。