js实现全屏显示

使用全屏API实现全屏显示

现代浏览器提供了全屏API，允许以编程方式控制全屏显示。以下是通过JavaScript实现全屏功能的方法：

进入全屏模式

function requestFullscreen(element) {
  if (element.requestFullscreen) {
    element.requestFullscreen();
  } else if (element.webkitRequestFullscreen) { /* Safari */
    element.webkitRequestFullscreen();
  } else if (element.msRequestFullscreen) { /* IE11 */
    element.msRequestFullscreen();
  }
}

// 示例：使整个文档进入全屏
requestFullscreen(document.documentElement);

退出全屏模式

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

检测全屏状态变化

可以监听全屏状态变化事件：

document.addEventListener('fullscreenchange', handleFullscreenChange);
document.addEventListener('webkitfullscreenchange', handleFullscreenChange); /* Safari */
document.addEventListener('msfullscreenchange', handleFullscreenChange); /* IE */

function handleFullscreenChange() {
  if (document.fullscreenElement || 
      document.webkitFullscreenElement || 
      document.msFullscreenElement) {
    console.log('Entered fullscreen');
  } else {
    console.log('Exited fullscreen');
  }
}

检查当前全屏状态

function isFullscreen() {
  return !!(document.fullscreenElement || 
            document.webkitFullscreenElement || 
            document.msFullscreenElement);
}

全屏样式调整

在全屏模式下，CSS伪类可以用于调整样式：

:fullscreen {
  background-color: yellow;
}

:-webkit-full-screen {
  background-color: yellow;
}

:-ms-fullscreen {
  background-color: yellow;
}

注意事项

• 全屏API必须在用户交互事件（如点击）中触发，不能自动调用
• 不同浏览器可能需要不同的前缀（webkit, ms）
• 全屏请求可能会被浏览器阻止，需要处理可能的拒绝情况
• 移动设备上的全屏行为可能与桌面设备不同