js双击页面进入全屏，并且兼容多种浏览器

1. 封装进入全屏的方法

/**
 * @description: 进入全屏
 */
export function requestFullScreen(el) {
  el = el || document.documentElement;
  // 判断各种浏览器，找到正确的方法
  const requestMethod =
    el.requestFullScreen || // W3C
    el.webkitRequestFullScreen || // Chrome等
    el.mozRequestFullScreen || // FireFox
    el.msRequestFullScreen; // IE11
  if (requestMethod) {
    requestMethod.call(el);
  } else if (typeof window.ActiveXObject !== "undefined") {
    // for Internet Explorer
    const wscript = new ActiveXObject("WScript.Shell");
    if (wscript !== null) {
      wscript.SendKeys("{F11}");
    }
  }
}

/**
 * @description: 退出全屏 判断浏览器种类
 */
export function exitFull() {
  // 判断各种浏览器，找到正确的方法
  const exitMethod =
    document.exitFullscreen || // W3C
    document.mozCancelFullScreen || // Chrome等
    document.webkitExitFullscreen || // FireFox
    document.webkitExitFullscreen; // IE11
  if (exitMethod) {
    exitMethod.call(document);
  } else if (typeof window.ActiveXObject !== "undefined") {
    // for Internet Explorer
    const wscript = new ActiveXObject("WScript.Shell");
    if (wscript !== null) {
      wscript.SendKeys("{F11}");
    }
  }
}

/**
 * @description: 判断是否是全屏
 * @return: true/false
 */
export function isFullScreen() {
  console.log(document, window.document);
  return (
    document.isFullScreen ||
    document.mozIsFullScreen ||
    document.webkitIsFullScreen
  );
}

/**
 * @description: 如果当前是全屏则退出,如果当前不是全屏这进入
 * @param {HTMLElement} el 标签对象
 * @return: true/false
 */
export function full(el) {
  if (isFullScreen()) {
    exitFull(); // 退出全屏
    return false;
  } else {
    requestFullScreen(el); // 进入全屏
    return true;
  }
}

2. 在组件中使用，记得先import导入全屏的这个方法 full

//全屏
  function fullScreen() {
    const element = document.getElementById('target')
    if (element) {
      full(element)
    }
  }