JS控制全屏模式

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

shandygaff

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

阅读量382

点赞数

分类专栏： js 文章标签： javascript

本文链接：https://blog.csdn.net/u012965830/article/details/107974033

版权

本文介绍了如何使用JavaScript的toggleFullscreen方法来控制全屏模式。首先检查当前是否处于全屏状态，然后根据状态触发进入或退出全屏的操作。

摘要由CSDN通过智能技术生成

toggleFullscreen

export function toggleFullscreen() {
  if (isFullscreen()) {
    exitFullscreen()
  } else {
    requestFullscreen()
  }
}

1，首先判断当前是否是全屏模式

export function isFullscreen(): boolean {
  let document = (window.document as any)
  return !!document.fullscreenElement || !!document.webkitFullscreenElement
}

2 ，触发全屏模式

export function requestFullscreen() {

  let document = (window.document as any)
  if (!document.fullscreenElement &&
      !document.mozFullScreenElement &&
      !document.webkitFullscreenElement &&
      !document.msFullscreenElement ) {
    if (document.documentElement.requestFullscreen) {
      document.documentElement.requestFullscreen()
    } else if (document.documentElement.msRequestFullscreen) {
      document.documentElement.msRequestFullscr