浏览器点击实现全屏

207 阅读1分钟

点击按钮实现全屏与取消全屏

this.isFullscreen = false 默认是false,未全屏状态

click() {
  // 点击全屏和取消全屏的方法不在同一处,cancel方法在document里
      let el = document.documentElement;
      let cel = document
      // 分别兼容浏览器的几种方法
      let rfs = 
          el.requestFullScreen || 
          el.webkitRequestFullScreen || 	
          el.mozRequestFullScreen || 
          el.msRequestFullScreen;
      let cfs = 
          cel.cancelFullScreen || 
          cel.webkitCancelFullScreen || 
          cel.mozCancelFullScreen || 
          cel.exitFullScreen;

      if (rfs && !this.isFullscreen) {
        this.isFullscreen = true
        rfs.call(el);
      } else if (cfs && this.isFullscreen) {
        this.isFullscreen = false
        cfs.call(cel)
      } else if (typeof window.ActiveXObject !== "undefined") {
        //for IE,这里其实就是模拟了按下键盘的F11,使浏览器全屏
        let wscript = new ActiveXObject("WScript.Shell");
        if (wscript != null) {
           this.isFullscreen = !this.isFullscreen
            wscript.SendKeys("{F11}");
        }
      } else {
          alert("浏览器不支持全屏");
      }
    }

参考链接 stackoverflow.com/questions/2…