JS/TS 中实现点击页面全屏或者退出全屏

这个例子是在vue+typescript环境下写的

HTML代码

<button @click="fullScroll">点击全屏</button>

Typescript代码

  // 判断是否全屏
  public isFullscreen() {
    const doc: any = document;
    if (doc.fullscreenElement) {
      return true;
    } else {
      return false;
    }
  }
  // 点击按钮全屏事件
  public fullScroll() {
    const doc: any = document;
    if (this.isFullscreen()) {
      // 是全屏就退出全屏
      if (doc.exitFullscreen) {
        doc.exitFullscreen();
      } else if (doc.mozCancelFullScreen) {
        (doc as any).mozCancelFullScreen();
      } else if (doc.webkitCancelFullScreen) {
        doc.webkitCancelFullScreen();
      }
    } else {
      // 否则将页面全屏
      if (doc.requestFullscreen) {
        doc.requestFullscreen();
      }
      //FireFox
      else if (doc.mozRequestFullScreen) {
        doc.mozRequestFullScreen();
      }
      //Chrome等
      else if (doc.webkitRequestFullScreen) {
        doc.webkitRequestFullScreen();
      }
      //IE11
      else if (doc.msRequestFullscreen) {
        doc.msRequestFullscreen();
      }
    }
  }

如果点击后不能全屏，修改一个地方即可

const doc: any = document.documentElement;