局部模块全屏展示实现

Element.requestFullscreen()方法用于发出异步请求使元素进入全屏模式。MDN地址

核心代码包含了一些浏览器的兼容处理

以 Vue项目为列：

 methods:{
    // 全屏事件
     showFull() {
      // 获取想要展示全屏的元素
      let elem = document.querySelector("#id");
      this.requestFullScreen(elem);
    },

    // 退出全屏
    exitFull() {
      let exitFullScreen =
        document.exitFullScreen ||
        document.mozCancelFullScreen ||
        document.webkitExitFullscreen ||
        document.msExitFullscreen;
      if (exitFullScreen) {
        exitFullScreen.call(document);
      }
    },
    // 展开全屏
    requestFullScreen(elem) {
      // #兼容不同的浏览器
      var requestMethod =
        elem.requestFullScreen ||
        elem.webkitRequestFullScreen ||
        elem.mozRequestFullScreen ||
        elem.msRequestFullScreen;

      if (requestMethod) {
        requestMethod.call(elem);
      } else if (typeof window.ActiveXObject !== "undefined") {
        // #模拟F11 实现全屏
        var wscript = new ActiveXObject("WScript.Shell");

        if (wscript !== null) {
          wscript.SendKeys("{F11}");
        }
      }
    },
  }