【js小技巧】页面某个元素全屏展示

背景

有一个地图组件，需要点击变成全屏，然后再点击缩回。本来想法是通过css来做的，但是这样子的话布局都要动，有点麻烦，至少也要涉及其他元素的显隐。
后来差了点资料，发现有一个更好的办法。如下展示

代码部分

  const fullarea = document.getElementById('fulldiv')
  if (this.fullscreen) { // 退出全屏
    if (document.exitFullscreen) {
      document.exitFullscreen()
    } else if (document.webkitCancelFullScreen) {
      document.webkitCancelFullScreen()
    } else if (document.mozCancelFullScreen) {
      document.mozCancelFullScreen()
    } else if (document.msExitFullscreen) {
      document.msExitFullscreen()
    }
  } else { // 进入全屏
    if (fullarea.requestFullscreen) {
      fullarea.requestFullscreen()
    } else if (fullarea.webkitRequestFullScreen) {
      fullarea.webkitRequestFullScreen()
    } else if (fullarea.mozRequestFullScreen) {
      fullarea.mozRequestFullScreen()
    } else if (fullarea.msRequestFullscreen) {
      // IE11
      fullarea.msRequestFullscreen()
    }
  }
  this.fullscreen = !this.fullscreen

说明： 简单的说，就是区分浏览器，调用document/浏览器自身的全屏方法。这个主要得益于目前浏览器的API的丰富。