JS全屏事件 模拟键盘事件F11 兼容IE

方法1：

  // 全屏  //el为全屏对象
    fullScreen(el) {
      var rfs = el.requestFullScreen || el.webkitRequestFullScreen || el.mozRequestFullScreen || el.msRequestFullScreen,
        wscript;

      if (typeof rfs != "undefined" && rfs) {
        rfs.call(el);
        return;
      }

      if (typeof window.ActiveXObject != "undefined") {
        wscript = new ActiveXObject("WScript.Shell");
        if (wscript) {
          wscript.SendKeys("{F11}");
        }
      }
    },
    // 退出全屏
    exitFullScreen(el) {
      var el = document,
        cfs = el.cancelFullScreen || el.webkitCancelFullScreen || el.mozCancelFullScreen || el.exitFullScreen,
        wscript;
      if (typeof cfs != "undefined" && cfs) {
        cfs.call(el);
        return;
      }
      if (typeof window.ActiveXObject != "undefined") {
        wscript = new ActiveXObject("WScript.Shell");
        if (wscript != null) {
          wscript.SendKeys("{F11}");
        }
      }
    }

调用

  // 全屏
fullScreen(app);
  // 退出全屏
exitFullScreen();

方法2：

        //全屏
        var docElm = document.documentElement;
        //W3C
        if (docElm.requestFullscreen) {
          docElm.requestFullscreen();
        }
        //FireFox
        else if (docElm.mozRequestFullScreen) {
          docElm.mozRequestFullScreen();
        }
        //Chrome等
        else if (docElm.webkitRequestFullScreen) {
          docElm.webkitRequestFullScreen();
        }
        //IE11
        else if (elem.msRequestFullscreen) {
          elem.msRequestFullscreen();
        }
      // 退出全屏
      //W3C
        if (document.exitFullscreen) {
          document.exitFullscreen();
        }
        //FireFox
        else if (document.mozCancelFullScreen) {
          document.mozCancelFullScreen();
        }
        //Chrome等
        else if (document.webkitCancelFullScreen) {
          document.webkitCancelFullScreen();
          data.name = '全屏'
        }
        //IE11
        else if (document.msExitFullscreen) {
          document.msExitFullscreen();
        }

我碰到的问题：刚开始调用是if 全屏 if 退出全屏,这里if判断的失误导致点击全屏后文字马上由变成了退出全屏变成全屏，但是vue很handleClick很奇怪的是只执行了 data.name = '全屏'，但是没有执行 me.exitFullScreen();

到了IE里面两句话就都执行了，然后我错误的以为这里的全屏未生效，其实是执行完全屏后马上退出全屏了

最终代码 全屏退出全屏方法（兼容IE）

 // 全屏  //el为全屏对象  // 判断各种浏览器，找到正确的方法
    launchFullScreen(element) {
      if (element.requestFullscreen) {
        element.requestFullscreen(); return true
      } else if (element.mozRequestFullScreen) {
        element.mozRequestFullScreen(); return true
      } else if (element.webkitRequestFullscreen) {
        element.webkitRequestFullscreen(); return true
      } else if (element.msRequestFullscreen) {
        element.msRequestFullscreen(); return true
      }
    },
    // 退出全屏
    exitFullScreen(el) {
      if (document.exitFullscreen) {
        document.exitFullscreen(); return true
      } else if (document.msExitFullscreen) {
        document.msExitFullscreen(); return true
      } else if (document.mozCancelFullScreen) {
        document.mozCancelFullScreen(); return true
      } else if (document.webkitCancelFullScreen) {
        document.webkitCancelFullScreen(); return true
      }
    },

调用

  // 全屏
      if (data.name == '全屏') {
        // 启动全屏!
        me.launchFullScreen(document.documentElement);
        data.name = '退出全屏'
      } else if (data.name == '退出全屏') {
        me.exitFullScreen();
        data.name = '全屏'
      }