javascript全屏API是什么_如何让元素进入或退出全屏模式？

admin 百科 2025-12-17 9

JavaScript全屏API是浏览器原生接口，用于让元素真正进入系统级全屏状态；需通过用户手势调用requestFullscreen()方法，兼容处理前缀，监听fullscreenchange事件并用document.exitFullscreen()退出。

javascript全屏API是什么_如何让元素进入或退出全屏模式？-第1张图片-佛山资讯网

JavaScript 全屏 API 是一套浏览器原生提供的接口，允许网页中的某个元素（比如视频容器、画布或整个页面）临时占据用户整个屏幕，隐藏浏览器 UI（地址栏、工具栏等），常用于视频播放、游戏、数据可视化等场景。它不是 CSS 的 width: 100vw; height: 100vh 模拟，而是真正触发系统级全屏状态。

如何让元素进入全屏模式？

核心是调用目标元素的 requestFullscreen() 方法。该方法返回一个 Promise，在成功进入全屏时 resolve，失败时 reject（比如用户拒绝、不支持、或非用户手势触发）。

必须由用户操作（如点击、按键）触发，不能在页面加载或定时器中自动调用，否则会被浏览器静默阻止
推荐检查并使用带前缀的旧版方法（如 webkitRequestFullscreen、msRequestFullscreen），但现代浏览器基本都支持标准 requestFullscreen
示例代码：

const elem = document.getElementById('my-video');
function launchFullscreen() {
  if (elem.requestFullscreen) {
    elem.requestFullscreen();
  } else if (elem.webkitRequestFullscreen) {
    elem.webkitRequestFullscreen();
  } else if (elem.msRequestFullscreen) {
    elem.msRequestFullscreen();
  }
}

// 绑定到按钮点击
document.getElementById('fs-btn').addEventListener('click', launchFullscreen);

登录后复制

如何退出全屏模式？

调用全局 document.exitFullscreen() 方法即可退出当前全屏状态。同样需注意兼容性写法，并建议加 try-catch 防止报错（例如当前未处于全屏时调用会抛异常）。

退出后浏览器会恢复原有 UI，页面布局通常不受影响（除非你用 CSS 做了全屏适配）
兼容写法示例：

function exitFullscreen() {
  if (document.exitFullscreen) {
    document.exitFullscreen();
  } else if (document.webkitExitFullscreen) {
    document.webkitExitFullscreen();
  } else if (document.msExitFullscreen) {
    document.msExitFullscreen();
  }
}

登录后复制