js实现全屏显示

实现全屏显示的方法

在JavaScript中，可以通过Fullscreen API来控制元素或整个文档进入全屏模式。以下是几种常见的实现方式：

进入全屏模式

使用Element.requestFullscreen()方法可以让指定元素全屏显示：

document.getElementById('targetElement').requestFullscreen();

若需要整个页面全屏，可直接对document.documentElement操作：

document.documentElement.requestFullscreen();

退出全屏模式

通过document.exitFullscreen()退出全屏：

document.exitFullscreen();

检测全屏状态

监听fullscreenchange事件并检查document.fullscreenElement：

document.addEventListener('fullscreenchange', () => {
  if (document.fullscreenElement) {
    console.log('已进入全屏');
  } else {
    console.log('已退出全屏');
  }
});

浏览器兼容性处理

不同浏览器可能需要前缀：

// 带前缀的兼容写法
const element = document.documentElement;
const requestMethod = element.requestFullscreen || 
                     element.webkitRequestFullscreen || 
                     element.mozRequestFullScreen || 
                     element.msRequestFullscreen;

if (requestMethod) {
  requestMethod.call(element);
}

样式调整建议

全屏元素建议添加CSS样式：

:-webkit-full-screen {
  width: 100%;
  height: 100%;
  background: white;
}

注意事项

• 全屏API必须在用户交互事件（如点击）中触发，不能自动执行
• iOS Safari对全屏API支持有限，可能需要使用webkitEnterFullscreen等特殊方法
• 部分浏览器可能限制全屏功能的使用频率

通过以上方法可以实现在大多数现代浏览器中的全屏功能控制。实际开发时应结合具体需求选择适合的实现方式，并做好兼容性测试。