JS 实现全屏效果

fullscreen.gif

点击按钮触发 requestFullscreen() 函数打开全屏

requestFullscreen () {
  const docElm = document.documentElement
  if (docElm.requestFullscreen) {
    docElm.requestFullscreen()
  } else if (docElm.msRequestFullscreen) {
    docElm.msRequestFullscreen()
  } else if (docElm.mozRequestFullScreen) {
    docElm.mozRequestFullScreen()
  } else if (docElm.webkitRequestFullScreen) {
    docElm.webkitRequestFullScreen()
  }
}

点击按钮触发 exitFullScreen() 函数关闭全屏

exitFullScreen () {
  if (document.exitFullscreen) {
    document.exitFullscreen()
  } else if (document.msExitFullscreen) {
    document.msExitFullscreen()
  } else if (document.mozCancelFullScreen) {
    document.mozCancelFullScreen()
  } else if (document.webkitCancelFullScreen) {
    document.webkitCancelFullScreen()
  }
}

如果需要监听全屏状态变换，可以监听 fullscreenchange 时间

document.addEventListener('fullscreenchange', () => {
  console.log('fullscreenchange')
})

Vue项目实现地址

https://github.com/gywgithub/vue-d3-examples
https://github.com/gywgithub/vue-d3-examples/blob/master/src/views/Examples.vue#L263

参考链接

https://developer.mozilla.org/en-US/docs/Web/API/Fullscreen_API
https://developer.mozilla.org/en-US/docs/Web/API/Fullscreen_API/Guide