HTML5网页如何实现全屏显示 HTML5网页全屏API的调用方法-html教程-PHP中文网

HTML5网页如何实现全屏显示 HTML5网页全屏API的调用方法

星夢妙者

发布： 2025-11-16 23:18:06

原创

220人浏览过

全屏API可通过requestFullscreen()使元素全屏，exitFullscreen()退出，结合fullscreenElement和fullscreenchange实现状态管理，需在用户操作中调用并处理浏览器兼容性。

html5网页如何实现全屏显示 html5网页全屏api的调用方法

要让HTML5网页中的元素（如视频、游戏或整个页面）进入全屏显示，可以通过浏览器提供的全屏API（Fullscreen API）来实现。这个API允许开发者控制页面或某个元素以全屏模式展示，提升用户体验。

1. 全屏API的基本用法

Fullscreen API 提供了几个关键方法和属性，用于控制全屏状态：

requestFullscreen()：使元素进入全屏模式
exitFullscreen()：退出全屏模式
fullscreenElement：返回当前处于全屏状态的元素
fullscreenchange 事件：全屏状态改变时触发

例如，让整个文档 body 进入全屏：

document.body.requestFullscreen();

2. 调用全屏的完整示例

以下是一个按钮点击后使页面进入全屏，并提供退出功能的示例：

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

芦笋演示

一键出成片的录屏演示软件，专为制作产品演示、教学课程和使用教程而设计。

查看详情

<button id="fullscreenBtn">进入全屏</button>

<script>
const btn = document.getElementById('fullscreenBtn');

btn.addEventListener('click', () => {
  if (!document.fullscreenElement) {
    document.body.requestFullscreen().catch(err => {
      alert(`无法进入全屏: ${err.message}`);
    });
  } else {
    document.exitFullscreen();
  }
});

// 监听全屏状态变化
document.addEventListener('fullscreenchange', () => {
  if (document.fullscreenElement) {
    btn.textContent = '退出全屏';
  } else {
    btn.textContent = '进入全屏';
  }
});
</script>