全屏与退出全屏功能

全屏与退出全屏功能

📄 Fullscreen API 使用说明

通过浏览器提供的 Fullscreen API，你可以实现在任意 HTML 元素上的全屏展示与退出全屏效果，适用于视频播放器、看图模式、报表展示等场景。

---

🧩 功能说明

• 支持进入全屏
• 支持退出全屏
• 支持检测当前是否处于全屏状态
• 兼容多浏览器前缀
• 可封装为 Vue / React 组件

---

📦 使用示例（原生 JavaScript）

进入全屏

function enterFullscreen(el = document.documentElement) {
  if (el.requestFullscreen) {
    el.requestFullscreen();
  } else if (el.webkitRequestFullscreen) {
    el.webkitRequestFullscreen();
  } else if (el.mozRequestFullScreen) {
    el.mozRequestFullScreen();
  } else if (el.msRequestFullscreen) {
    el.msRequestFullscreen();
  }
}

退出全屏

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

判断是否全屏

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

切换全屏

function toggleFullscreen() {
  if (isFullscreen()) {
    exitFullscreen();
  } else {
    enterFullscreen();
  }
}

---

🚀 Vue 3 组合式封装

import { ref } from 'vue';

const isFull = ref(false);

function toggleFullscreen(el: HTMLElement = document.documentElement) {
  if (!isFull.value) {
    el.requestFullscreen?.();
    isFull.value = true;
  } else {
    document.exitFullscreen?.();
    isFull.value = false;
  }
}

export { toggleFullscreen, isFull };

---

📡 监听全屏变化（可选）

document.addEventListener('fullscreenchange', () => {
  console.log('全屏状态变更：', !!document.fullscreenElement);
});

‍