全屏与退出全屏功能

全屏与退出全屏功能

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

‍