全屏角度示例 - JavaScript

以下是一个使用 JavaScript 实现全屏角度示例的代码片段，它会将网页元素显示在全屏模式中。

// 检查浏览器是否支持全屏API
function isFullScreenSupported() {
  return (
    document.fullscreenEnabled ||
    document.webkitFullscreenEnabled ||
    document.mozFullScreenEnabled ||
    document.msFullscreenEnabled
  );
}

// 进入全屏模式
function enterFullScreen(element) {
  if (element.requestFullscreen) {
    element.requestFullscreen();
  } else if (element.webkitRequestFullscreen) {
    element.webkitRequestFullscreen();
  } else if (element.mozRequestFullScreen) {
    element.mozRequestFullScreen();
  } else if (element.msRequestFullscreen) {
    element.msRequestFullscreen();
  }
}

// 退出全屏模式
function exitFullScreen() {
  if (document.exitFullscreen) {
    document.exitFullscreen();
  } else if (document.webkitExitFullscreen) {
    document.webkitExitFullscreen();
  } else if (document.mozCancelFullScreen) {
    document.mozCancelFullScreen();
  } else if (document.msExitFullscreen) {
    document.msExitFullscreen();
  }
}

// 切换全屏模式
function toggleFullScreen(element) {
  if (isFullScreen()) {
    exitFullScreen();
  } else {
    enterFullScreen(element);
  }
}

// 检查当前是否处于全屏模式
function isFullScreen() {
  return (
    document.fullscreenElement ||
    document.webkitFullscreenElement ||
    document.mozFullScreenElement ||
    document.msFullscreenElement
  );
}

以上代码定义了几个函数来控制全屏模式的进入、退出和切换。通过 isFullScreenSupported 函数可以检查浏览器是否支持全屏 API。enterFullScreen 函数用于将指定的元素进入全屏模式，exitFullScreen 函数用于退出全屏模式，toggleFullScreen 函数可以在全屏和非全屏之间切换，isFullScreen 函数则用于检查当前是否处于全屏模式。

你可以根据自己的实际需求，将以上函数添加到你的 JavaScript 代码中，并根据需要调用这些函数来控制全屏模式的展示。请注意，在执行全屏相关的操作时，需要用户主动触发，例如点击一个按钮。

希望以上示例对你有所帮助！