全屏API用於沉浸式體驗

Fullscreen API 可让网页内容全屏展示，提升视频、游戏等应用的沉浸感；使用 element.requestFullscreen() 请求全屏，document.exitFullscreen() 退出全屏，监听 fullscreenchange 事件获取状态变化，document.fullscreenElement 返回当前全屏元素；需注意浏览器兼容性，应封装 mozRequestFullScreen、webkitRequestFullscreen 等前缀方法；全屏操作必须由用户手势触发，如点击事件，禁止自动调用；实际应用中可结合类名切换优化 UI，适用于播放器、游戏、演示文稿和图片查看器等场景，通过合理使用可显著提升用户体验。

Fullscreen API 让网页应用能够以全屏模式展示内容，为用户带来更沉浸式的体验。这对于视频播放器、在线游戏、演示文稿和图像查看器等场景特别有用。通过简单的 JavaScript 接口，开发者可以控制页面元素进入或退出全屏状态，提升用户的专注度和交互体验。

如何使用 Fullscreen API

Fullscreen API 并不复杂，核心方法和属性都挂载在 document 对象上。主要涉及以下几个关键点：

• 请求全屏：使用 element.requestFullscreen() 让某个元素进入全屏。
• 退出全屏：调用 document.exitFullscreen() 退出全屏模式。
• 全屏状态监听：通过监听 fullscreenchange 事件来响应全屏状态变化。
• 当前全屏元素：document.fullscreenElement 返回当前处于全屏状态的元素，若无则返回 null。

const elem = document.getElementById('container');

// 请求进入全屏
function openFullscreen() {
  if (elem.requestFullscreen) {
    elem.requestFullscreen();
  }
}

// 退出全屏
function closeFullscreen() {
  if (document.exitFullscreen) {
    document.exitFullscreen();
  }
}

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

浏览器兼容性与前缀处理

虽然现代浏览器普遍支持 Fullscreen API，但部分浏览器仍需使用前缀方法。为了确保兼容性，建议进行判断和封装：

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();
  }
}

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();
  }
}

用户手势限制与安全策略

出于安全和用户体验考虑，浏览器要求全屏操作必须由用户手势触发（如点击、触摸），不能由页面自动执行。例如以下代码不会生效：

// ❌ 无效：自动调用
window.onload = () => {
  elem.requestFullscreen();
};

而这样是可以的：

// ✅ 有效：用户点击触发
button.addEventListener('click', () => {
  elem.requestFullscreen();
});

此外，部分浏览器在进入全屏时会显示一个提示栏，允许用户按 Esc 或 F11 退出。

实际应用场景建议

• 视频播放器：点击“全屏”按钮后播放区域全屏展示，隐藏控制栏几秒后淡出，提升观看体验。
• 在线游戏：开始游戏前提示用户点击按钮进入全屏，避免误触退出。
• 演示系统：结合键盘事件（如方向键翻页），在全屏下提供更专注的浏览体验。
• 图像查看器：点击图片后放大并全屏展示，支持左右箭头切换。

你还可以在全屏时动态调整 UI：

document.addEventListener('fullscreenchange', () => {
  const isInFullscreen = !!document.fullscreenElement;
  document.body.classList.toggle('fullscreen-mode', isInFullscreen);
  // 可以隐藏导航栏、调整字体等
});

基本上就这些。Fullscreen API 使用简单，但能显著提升特定场景下的用户体验。只要注意用户触发限制和兼容性处理，就能安全可靠地实现沉浸式功能。

以上是全屏API用於沉浸式體驗的詳細內容。更多資訊請關注PHP中文網其他相關文章！