js全屏事件,进入全屏，退出全屏操作

上面是全面化方案,下面还有个简单的实现功能

1.进入全屏

function launchFullscreen(element) {
  if (element.requestFullscreen) {
    element.requestFullscreen()
  } else if (element.mozRequestFullScreen) {
    element.mozRequestFullScreen()
  } else if (element.msRequestFullscreen) {
    element.msRequestFullscreen()
  } else if (element.webkitRequestFullscreen) {
    element.webkitRequestFullScreen()
  }
}

launchFullscreen(document.documentElement) // 整个页面进入全屏
launchFullscreen(document.getElementById("id")) //某个元素进入全屏

2.退出全屏

function exitFullscreen() {
  if (document.exitFullscreen) {
    document.exitFullscreen()
  } else if (document.msExitFullscreen) {
    document.msExitFullscreen()
  } else if (document.mozCancelFullScreen) {
    document.mozCancelFullScreen()
  } else if (document.webkitExitFullscreen) {
    document.webkitExitFullscreen()
  }
}
exitFullscreen()

3. 全屏事件

document.addEventListener("fullscreenchange", function (e) {
  if (document.fullscreenElement) {
    console.log('进入全屏')
  } else {
    console.log('退出全屏')
  }
})

简单实现全屏功能的

点击事件

    toggleScreen() {
      // 如果未开启就开启 如果已开启就关闭
      if (this.isScreenFull) {
        document.exitFullscreen()  // 关闭全屏
      } else {
        document.documentElement.requestFullscreen()   开启全屏
      }
      this.isScreenFull = !this.isScreenFull
    }

全屏事件 

    document.addEventListener('fullscreenchange', () => {
      // 监听到屏幕变化，在回调中判断是否已退出全屏 如果已退出全屏 把本地状态修改为false
      // document.fullscreen 会返回true或false
      const isFull = document.fullscreen    
      if (!isFull) { 
        this.isScreenFull = false
      }
    })