全屏API

在 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 事件可以对全屏状态进行监控，实现更加丰富的交互体验。 ...