JavaScript 怎么使用全屏 API 将指定元素全屏显示-js教程-PHP中文网

javascript全屏api通过requestfullscreen()方法实现元素全屏，需用户手势触发、处理浏览器前缀兼容性，并监听fullscreenchange事件检测状态变化。

javascript 怎么使用全屏 api 将指定元素全屏显示

JavaScript 使用全屏 API 将指定元素全屏显示，核心是调用该元素的 requestFullscreen() 方法（注意拼写是 Fullscreen，不是 Fullscreened 或 FullScreen），并处理浏览器前缀和兼容性问题。

基础用法：调用 requestFullscreen()

现代浏览器基本支持标准方法，直接在目标元素上调用即可：

确保目标元素已存在于 DOM 中（例如通过 document.getElementById 或 querySelector 获取）
调用 element.requestFullscreen()
该方法返回一个 Promise，可监听成功或失败

示例：

const box = document.getElementById('myBox');
if (box) {
  box.requestFullscreen()
    .then(() => console.log('进入全屏成功'))
    .catch(err => console.error('全屏请求被拒绝或不支持:', err));
}

兼容旧版浏览器（带前缀）

部分老版本 Chrome、Firefox、Safari 曾使用带前缀的方法，现在虽已废弃，但若需支持较老环境（如 Chrome ≤ 57、Firefox ≤ 63），可做兼容封装：

java后端编程

专用于 Java Spring Boot 后端开发的专业技能。当用户提出以下需求时，应调用此技能：构建 REST API、创建 Spring Boot 项目、编写 Java 后端服务、配置数据库访问（JPA / MyBatis）、处理认证与授权（Spring Security / JWT）、实现微服务架构（Spring Cloud）、排查 Spring Boot 相关错误、审查 Java 代码质量，或执行任何与 Spring Boot / Java 后端相关的任务。

下载

requestFullscreen（标准）
webkitRequestFullscreen（旧 Safari / Chrome）
mozRequestFullScreen（旧 Firefox）
msRequestFullscreen（旧 Edge）

推荐写法（自动匹配可用方法）：

function launchFullscreen(element) {
  if (element.requestFullscreen) {
    element.requestFullscreen();
  } else if (element.webkitRequestFullscreen) {
    element.webkitRequestFullscreen();
  } else if (element.mozRequestFullScreen) {
    element.mozRequestFullScreen();
  } else if (element.msRequestFullscreen) {
    element.msRequestFullscreen();
  }
}

注意事项与限制

全屏 API 受严格的安全策略约束，必须满足以下条件才能生效：

必须由用户手势触发（如 click、keydown），不能在页面加载、定时器或异步回调中直接调用
iframe 需显式允许：若目标元素在 iframe 内，iframe 必须设置 allow="fullscreen" 属性
部分元素不支持：例如 <iframe></iframe>、<canvas></canvas> 等多数块级元素支持，但 <img> 或行内元素需包裹在容器中再调用
退出全屏：调用 document.exitFullscreen()（同样有对应前缀）

监听全屏状态变化

可通过监听 fullscreenchange 事件获知是否进入/退出全屏：

document.addEventListener('fullscreenchange', () => {
  if (document.fullscreenElement) {
    console.log('当前全屏元素:', document.fullscreenElement);
  } else {
    console.log('已退出全屏');
  }
});

注意属性名是 fullscreenElement（无大写 F），不是 fullScreenElement。