Javascript如何实现全屏功能_如何进入和退出全屏？-js教程-PHP中文网

Javascript如何实现全屏功能_如何进入和退出全屏？

狼影

发布： 2025-12-20 19:25:21

原创

241人浏览过

JavaScript全屏功能依赖Fullscreen API，需用户手势触发；调用requestFullscreen()进入、exitFullscreen()退出；通过fullscreenElement判断状态；监听fullscreenchange事件响应变化，并需处理Promise拒绝。

javascript如何实现全屏功能_如何进入和退出全屏？

JavaScript 实现全屏功能主要依靠浏览器提供的 Fullscreen API，它允许网页元素（如整个页面、视频、div 等）进入和退出全屏模式。注意：该操作必须由用户手势（如点击、按键）触发，不能自动执行，否则会被浏览器阻止。

如何进入全屏

调用目标元素的 requestFullscreen() 方法即可尝试进入全屏。现代浏览器基本支持，但需注意兼容性前缀（已基本淘汰，但可做兜底）：

推荐写法（标准 + 兼容）：

function launchFullscreen(element) {
  if (element.requestFullscreen) {
    element.requestFullscreen();
  } else if (element.mozRequestFullScreen) { // Firefox
    element.mozRequestFullScreen();
  } else if (element.webkitRequestFullscreen) { // Chrome, Safari, Opera
    element.webkitRequestFullscreen();
  } else if (element.msRequestFullscreen) { // IE/Edge
    element.msRequestFullscreen();
  }
}

// 示例：让整个页面全屏
launchFullscreen(document.documentElement);

// 或让某个 div 全屏
// launchFullscreen(document.getElementById('myDiv'));

登录后复制

⚠️ 注意：document.documentElement 表示整个 HTML 文档（即“页面级”全屏），而传入某个 DOM 元素则只让该元素及其子内容占满屏幕（如播放器容器）。

如何退出全屏

调用 document.exitFullscreen() 即可退出当前全屏状态。同样需要兼容写法：

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

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

登录后复制

这个方法不接收参数，且无论哪个元素触发的全屏，都统一通过 document 退出。

如何判断是否处于全屏状态

可通过 document.fullscreenElement 判断：若为 null 表示未全屏；否则返回当前全屏的 DOM 元素。

知识画家

AI交互知识生成引擎，一句话生成知识视频、动画和应用

查看详情

document.fullscreenElement —— 当前全屏的元素（标准）
兼容属性：document.mozFullScreenElement、document.webkitFullscreenElement、document.msFullscreenElement

常用判断逻辑：

function isFullscreen() {
  return !!(
    document.fullscreenElement ||
    document.webkitFullscreenElement ||
    document.mozFullScreenElement ||
    document.msFullscreenElement
  );
}

登录后复制

监听全屏状态变化

全屏进入/退出时会触发事件，可用于更新 UI（如切换按钮图标）：

fullscreenchange：标准事件（推荐监听）
兼容事件：webkitfullscreenchange、mozfullscreenchange、msfullscreenchange

示例：

document.addEventListener('fullscreenchange', () => {
  if (isFullscreen()) {
    console.log('已进入全屏');
    // 更新按钮文字为“退出全屏”
  } else {
    console.log('已退出全屏');
    // 更新按钮文字为“进入全屏”
  }
});

登录后复制

注意：事件绑定在 document 上，不是触发元素上。

不复杂但容易忽略：全屏 API 是异步的，可能失败（比如没用户交互、跨 iframe 限制、移动端不支持等），建议配合 catch 处理 Promise 拒绝（现代 requestFullscreen() 返回 Promise）：

element.requestFullscreen()
  .catch(err => console.error('无法进入全屏:', err));

登录后复制

以上就是Javascript如何实现全屏功能_如何进入和退出全屏？的详细内容，更多请关注php中文网其它相关文章！

大家都在看：

javascript如何实现加密_在前端进行加密是否真的安全 javascript如何实现缓存策略_Service Worker如何管理离线资源为什么需要学习JavaScript_掌握JavaScript能带来哪些职业机遇 javascript的Node.js是什么_如何构建后端应用？ javascript类型转换如何发生_隐式转换和显式转换是什么