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

Q_Q 忙里偷闲

已于 2023-09-19 17:32:26 修改

阅读量1.8w

点赞数 5

分类专栏： # javascript 专栏文章标签： fullscreenchange 全屏进入全屏退出全屏

于 2019-06-26 11:32:50 首次发布

本文链接：https://blog.csdn.net/qq_36410795/article/details/93723822

版权

javascript 专栏专栏收录该内容

19 篇文章

订阅专栏

文章目录

1.全屏事件
2.进入全屏
3.退出全屏

1.全屏事件

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

2.进入全屏

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")) //某个元素进入全屏

3.退出全屏

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()