浏览器JS全屏API如何使用？

浏览器JS全屏API通过requestFullscreen()和exitFullscreen()方法控制全屏状态，需处理浏览器兼容性、用户交互限制，并监听状态变化与错误事件。以下是具体实现方法与关键细节：

1. 进入全屏调用元素的requestFullscreen()方法，需处理浏览器前缀：

   const element = document.getElementById('target');function enterFullscreen() { if (element.requestFullscreen) { element.requestFullscreen(); } else if (element.webkitRequestFullscreen) { // Safari element.webkitRequestFullscreen(); } else if (element.msRequestFullscreen) { // IE11 element.msRequestFullscreen(); }}

   触发条件：必须由用户手势（如点击、触摸）直接触发，否则浏览器会拒绝并抛出DOMException。

2. 退出全屏调用document.exitFullscreen()，同样需处理前缀：

   function exitFullscreen() { if (document.exitFullscreen) { document.exitFullscreen(); } else if (document.webkitExitFullscreen) { // Safari document.webkitExitFullscreen(); } else if (document.msExitFullscreen) { // IE11 document.msExitFullscreen(); }}

   用户行为：用户可通过按Esc键退出全屏，开发者无需额外处理。

• 强制要求：requestFullscreen()必须由用户手势触发（如点击按钮），否则会失败。示例：页面加载时自动全屏或定时器触发全屏均会被浏览器阻止。
• 最佳实践：提供明确的“进入全屏”按钮，确保符合API要求与用户预期。<button id="fullscreenBtn">进入全屏</button><script> document.getElementById('fullscreenBtn').addEventListener('click', enterFullscreen);</script>

• 全屏范围：可针对任意元素（如<video>、<canvas>、<div>）进入全屏，仅该元素及其子内容占据屏幕，其他内容隐藏。示例：让视频全屏播放：const video = document.getElementById('myVideo');document.getElementById('playBtn').addEventListener('click', () => { if (video.requestFullscreen) video.requestFullscreen();});

1. 状态恢复：退出全屏后，需恢复页面UI和逻辑（如视频继续播放、隐藏全屏按钮）。
2. 按钮可见性：确保退出按钮在全屏模式下可见且易于点击。
3. 监听状态变化：通过fullscreenchange事件同步全屏状态，调整UI：document.addEventListener('fullscreenchange', () => { if (document.fullscreenElement) { console.log('进入全屏模式'); // 显示全屏UI或调整元素大小 } else { console.log('退出全屏模式'); // 恢复默认UI }});// 旧版浏览器需监听带前缀的事件document.addEventListener('webkitfullscreenchange', () => {});document.addEventListener('mozfullscreenchange', () => {});document.addEventListener('MSFullscreenChange', () => {});

1. 状态属性

   document.fullscreenElement：返回当前全屏的元素，若为null则表示非全屏状态。

   document.fullscreenEnabled：检查当前文档是否允许全屏（如iframe未设置allowfullscreen时为false）。

2. 错误处理监听fullscreenerror事件，捕获调用失败的原因（如非用户手势触发）：

   document.addEventListener('fullscreenerror', (event) => { console.error('全屏失败:', event); alert('无法进入全屏模式，请确保通过点击按钮触发。');});// 旧版浏览器需监听带前缀的事件document.addEventListener('webkitfullscreenerror', () => {});document.addEventListener('mozfullscreenerror', () => {});document.addEventListener('MSFullscreenError', () => {});

通过以上方法，可实现浏览器全屏API的完整功能，兼顾兼容性、用户交互限制与状态管理，提供流畅的沉浸式体验。