全屏API

Thu, 17 Oct 2024 00:00:00 +0800

在 HTML 中，可以通过调用浏览器的全屏 API 实现页面或页面中的某个元素全屏显示。全屏 API 是 HTML5 提供的一项功能，允许将元素切换为全屏模式。

使用全屏 API 实现全屏

全屏 API 提供了以下常用方法和属性：

requestFullscreen()：请求将元素设置为全屏模式。
exitFullscreen()：退出全屏模式。
fullscreenElement：返回当前正在全屏显示的 DOM 元素，如果没有元素全屏，则返回 null。
fullscreenchange 事件：当全屏状态发生变化时触发，用来监听进入或退出全屏。

实现全屏的基本步骤

选择你希望全屏的元素。
使用 element.requestFullscreen() 方法来进入全屏。
使用 document.exitFullscreen() 来退出全屏模式。

示例代码

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>全屏示例</title>
 <style>
 #fullscreenContent {
 width: 100px;
 height: 100px;
 background-color: lightblue;
 margin: 50px auto;
 text-align: center;
 line-height: 100px;
 }
 </style>
</head>
<body>

 <div id="fullscreenContent">点击全屏</div>
 <button id="exitFullscreenBtn" style="display:none;">退出全屏</button>

 <script>
 const fullscreenContent = document.getElementById('fullscreenContent');
 const exitFullscreenBtn = document.getElementById('exitFullscreenBtn');

 // 进入全屏模式
 fullscreenContent.addEventListener('click', function() {
 if (fullscreenContent.requestFullscreen) {
 fullscreenContent.requestFullscreen();
 } else if (fullscreenContent.mozRequestFullScreen) { // Firefox
 fullscreenContent.mozRequestFullScreen();
 } else if (fullscreenContent.webkitRequestFullscreen) { // Chrome, Safari and Opera
 fullscreenContent.webkitRequestFullscreen();
 } else if (fullscreenContent.msRequestFullscreen) { // IE/Edge
 fullscreenContent.msRequestFullscreen();
 }
 exitFullscreenBtn.style.display = 'inline-block';
 });

 // 退出全屏模式
 exitFullscreenBtn.addEventListener('click', function() {
 if (document.exitFullscreen) {
 document.exitFullscreen();
 } else if (document.mozCancelFullScreen) { // Firefox
 document.mozCancelFullScreen();
 } else if (document.webkitExitFullscreen) { // Chrome, Safari and Opera
 document.webkitExitFullscreen();
 } else if (document.msExitFullscreen) { // IE/Edge
 document.msExitFullscreen();
 }
 exitFullscreenBtn.style.display = 'none';
 });

 // 监听全屏状态变化
 document.addEventListener('fullscreenchange', () => {
 console.log('全屏状态发生变化');
 });
 </script>

</body>
</html>

代码解释

进入全屏：点击 #fullscreenContent 的 div 时，调用 requestFullscreen() 方法使该元素进入全屏模式。
退出全屏：点击按钮 #exitFullscreenBtn，调用 document.exitFullscreen() 退出全屏模式。
跨浏览器兼容性：由于部分浏览器的全屏 API 有不同的实现方法，代码中兼容了各个主流浏览器的实现（例如 Chrome, Firefox, Safari, Edge）。
监听全屏状态变化：使用 fullscreenchange 事件来监听当前全屏模式的变化，可以在进入或退出全屏时执行额外操作。

全屏 API 的一些注意事项

全屏 API 只能在用户交互（如点击或按键事件）后触发，不能通过脚本自动进入全屏模式，这是为了防止用户体验被打断。
不同浏览器的全屏 API 实现可能稍有不同，因此通常需要做一些兼容性处理。
在移动端设备上，全屏模式的行为可能与桌面端有所不同。

总结

HTML5 的全屏 API 提供了一种简单而直观的方法来让页面或元素进入全屏模式。通过 requestFullscreen() 方法可以将任意元素全屏显示，exitFullscreen() 则用来退出全屏模式。结合 fullscreenchange 事件可以对全屏状态进行监控，实现更加丰富的交互体验。