HTML5全屏API怎么用_HTML5FullscreenAPI实现全屏显示的方法与实例-html教程-PHP中文网

HTML5全屏API怎么用_HTML5FullscreenAPI实现全屏显示的方法与实例

爱谁谁

发布： 2025-11-21 22:52:48

原创

935人浏览过

HTML5全屏API可通过JavaScript直接调用，需先检测浏览器支持情况，使用requestFullscreen及带前缀方法让元素全屏，调用exitFullscreen退出，并监听fullscreenchange事件获取状态变化，注意兼容性和用户交互触发限制。

html5全屏api怎么用_html5fullscreenapi实现全屏显示的方法与实例

HTML5全屏API（Fullscreen API）允许开发者让网页中的某个元素进入全屏模式，提升用户体验，常用于视频播放、游戏或演示页面。使用这个API不需要引入额外库，直接通过JavaScript调用即可。

1. 判断浏览器是否支持全屏API

在调用全屏功能前，最好先检测当前浏览器是否支持。可通过检查元素是否存在requestFullscreen方法来判断：

element.requestFullscreen() 是标准方法
部分浏览器仍需使用前缀，如：webkitRequestFullscreen（Chrome, Safari）、mozRequestFullScreen（Firefox）

示例代码：

if (elem.requestFullscreen) {
  elem.requestFullscreen();
} else if (elem.webkitRequestFullscreen) {
  elem.webkitRequestFullscreen();
} else if (elem.mozRequestFullScreen) {
  elem.mozRequestFullScreen();
} else if (elem.msRequestFullscreen) {
  elem.msRequestFullscreen();
} else {
  alert("当前浏览器不支持全屏API");
}

登录后复制

2. 让元素进入全屏模式

选择一个DOM元素（如div、video等），调用其全屏请求方法即可进入全屏。

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

HTML结构示例：

<div id="content">这是一个可以全屏的区域</div>
<button onclick="openFullscreen()">进入全屏</button>

登录后复制

JavaScript实现：

function openFullscreen() {
  const elem = document.getElementById("content");
  if (elem) {
    if (elem.requestFullscreen) {
      elem.requestFullscreen();
    } else if (elem.webkitRequestFullscreen) {
      elem.webkitRequestFullscreen();
    } else if (elem.mozRequestFullScreen) {
      elem.mozRequestFullScreen();
    } else if (elem.msRequestFullscreen) {
      elem.msRequestFullscreen();
    }
  }
}

登录后复制

3. 退出全屏模式

可以通过document.exitFullscreen()退出全屏状态。

SEEK.ai

AI驱动的智能数据解决方案，询问您的任何数据并立即获得答案

128

查看详情

添加退出按钮：

<button onclick="exitFullscreen()">退出全屏</button>

登录后复制

JavaScript代码：

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

登录后复制

4. 监听全屏状态变化

可以监听fullscreenchange事件，判断当前是否处于全屏状态。

document.addEventListener("fullscreenchange", () => {
  if (document.fullscreenElement) {
    console.log("已进入全屏");
  } else {
    console.log("已退出全屏");
  }
});

登录后复制

注意：带前缀的事件名也需兼容，例如webkitfullscreenchange、mozfullscreenchange。

完整监听示例：

document.addEventListener("fullscreenchange", handleScreenChange);
document.addEventListener("webkitfullscreenchange", handleScreenChange);
document.addEventListener("mozfullscreenchange", handleScreenChange);
document.addEventListener("msfullscreenchange", handleScreenChange);

function handleScreenChange() {
  const isFullscreen = document.fullscreenElement ||
                       document.webkitFullscreenElement ||
                       document.mozFullScreenElement ||
                       document.msFullscreenElement;
  console.log(isFullscreen ? "全屏中" : "非全屏");
}

登录后复制

基本上就这些。只要注意浏览器兼容性和用户交互触发限制（全屏操作必须由用户手势如点击触发），就能顺利实现全屏功能。不复杂但容易忽略细节。

以上就是HTML5全屏API怎么用_HTML5FullscreenAPI实现全屏显示的方法与实例的详细内容，更多请关注php中文网其它相关文章！