浏览器判断是否全屏, 设置浏览器全屏，设置浏览器退出全屏

最新推荐文章于 2024-07-31 15:28:49 发布

原创最新推荐文章于 2024-07-31 15:28:49 发布 · 446 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #html5 #开发语言

该代码段提供了一组JavaScript函数，用于检查浏览器当前是否处于全屏模式，以及进行全屏和退出全屏的操作。它利用了`document`对象的全屏相关API，如`requestFullScreen`,`webkitRequestFullScreen`,`mozRequestFullScreen`等。

/**
 * 浏览器判断是否全屏
 */
export const fullscreenEnable = () => {
  var isFullscreen = document.isFullScreen || document.mozIsFullScreen || document.webkitIsFullScreen
  return isFullscreen;
}

/**
 *  浏览器全屏
 */
export const reqFullScreen = () => {
  if (document.documentElement.requestFullScreen) {
    document.documentElement.requestFullScreen();
  } else if (document.documentElement.webkitRequestFullScreen) {
    document.documentElement.webkitRequestFullScreen();
  } else if (document.documentElement.mozRequestFullScreen) {
    document.documentElement.mozRequestFullScreen();
  }
};

/**
 * 浏览器退出全屏
 */
export const exitFullScreen = () => {
  if (document.documentElement.requestFullScreen) {
    document.exitFullScreen();
  } else if (document.documentElement.webkitRequestFullScreen) {
    document.webkitCancelFullScreen();
  } else if (document.documentElement.mozRequestFullScreen) {
    document.mozCancelFullScreen();
  }
};