js实用工具-全屏/取消全屏-判断浏览器内核-监听全屏/取消全屏实例

• 全屏

/**
 * 全屏
 */
function toFullScreen() {
  let elem = document.body;
  elem.webkitRequestFullScreen ?
    elem.webkitRequestFullScreen() :
    elem.mozRequestFullScreen ?
    elem.mozRequestFullScreen() :
    elem.msRequestFullscreen ?
    elem.msRequestFullscreen() :
    elem.requestFullScreen ?
    elem.requestFullScreen() :
    alert("浏览器不支持全屏");
}

• 取消全屏

/**
 * 退出全屏
 */
function exitFullscreen() {
  let elem = parent.document;
  elem.webkitCancelFullScreen ?
    elem.webkitCancelFullScreen() :
    elem.mozCancelFullScreen ?
    elem.mozCancelFullScreen() :
    elem.cancelFullScreen ?
    elem.cancelFullScreen() :
    elem.msExitFullscreen ?
    elem.msExitFullscreen() :
    elem.exitFullscreen ?
    elem.exitFullscreen() :
    alert("切换失败,可尝试Esc退出");
}

• 判断浏览器内核

https://www.cnblogs.com/xtqg0304/p/9516095.html
getBrowserType() {
      let userAgent = navigator.userAgent; //取得浏览器的userAgent字符串

      let isOpera = userAgent.indexOf("Opera") > -1;//判断是不是Opera
      let isIE = userAgent.indexOf("compatible") > -1 && userAgent.indexOf("MSIE") > -1 && !isOpera; //判断是否IE浏览器
      let isEdge = userAgent.indexOf("Edg") > -1; //判断是否IE的Edge浏览器
      let isFF = userAgent.indexOf("Firefox") > -1; //判断是否Firefox浏览器
      let isSafari = userAgent.indexOf("Safari") > -1 && userAgent.indexOf("Chrome") == -1; //判断是否Safari浏览器
      let isChrome = userAgent.indexOf("Chrome") > -1 && userAgent.indexOf("Safari") > -1; //判断Chrome浏览器
      let isIE11 = userAgent.indexOf("Trident/7.0") > -1 && userAgent.indexOf("rv") > -1 && !isIE && !isOpera && !isEdge && !isFF && !isSafari && !isChrome;//判断是不是ie11

      if (isIE) {//ie 非ie11
        let reIE = new RegExp("MSIE (\\d+\\.\\d+);");
        reIE.test(userAgent);
        let fIEVersion = parseFloat(RegExp["$1"]);
        if (fIEVersion == 7) {
          return "IE7";
        } else if (fIEVersion == 8) {
          return "IE8";
        } else if (fIEVersion == 9) {
          return "IE9";
        } else if (fIEVersion == 10) {
          return "IE10";
        } else {
          return "IE5不包括5以下"
        }
      } else if (isIE11) {//ie11
        return "IE11"
      } else if (isOpera) {
        return "Opera";
      } else if (isEdge) {
        return "Edge";
      } else if (isFF) {
        return "Firefox";
      } else if (isSafari) {
        return "Safari";
      } else if (isChrome) {
        return "Chrome";
      } else {
        return '非主流浏览器，建议更换！'
      }
    }

• 寻找对应的浏览器全屏属性

function findCorrespondingBrowserFullscreenchange() {
        switch (hp.getBrowserType()) {
          case 'Chrome':
            return {
              typeFullscreenchange: 'webkitfullscreenchange',
              typeFullScreen: 'webkitIsFullScreen'
            }
          case 'Edge':
            return {
              typeFullscreenchange: 'webkitfullscreenchange',
              typeFullScreen: 'webkitIsFullScreen'
            }
          case 'Firefox':
            return {
              typeFullscreenchange: 'mozfullscreenchange',
              typeFullScreen: 'mozFullScreen'
            }
          case 'IE7':
            return {
              typeFullscreenchange: 'msfullscreenchange',
              typeFullScreen: 'msFullscreenElement'
            }
          case 'IE8':
            return {
              typeFullscreenchange: 'msfullscreenchange',
              typeFullScreen: 'msFullscreenElement'
            }
          case 'IE9':
            return {
              typeFullscreenchange: 'msfullscreenchange',
              typeFullScreen: 'msFullscreenElement'
            }
          case 'IE10':
            return {
              typeFullscreenchange: 'msfullscreenchange',
              typeFullScreen: 'msFullscreenElement'
            }
          case 'IE11':
            return {
              typeFullscreenchange: 'msfullscreenchange',
              typeFullScreen: 'msFullscreenElement'
            }
          default:
            return {
              typeFullscreenchange: 'fullscreenchange',
              typeFullScreen: 'fullscreen'
            }
        }
      }

• 综合实例

      var typeFullscreenchange = findCorrespondingBrowserFullscreenchange().typeFullscreenchange;
      var typeFullScreen = findCorrespondingBrowserFullscreenchange().typeFullScreen;

      document.querySelector('.btn1').addEventListener('click', function () {//点击按钮进入全屏
        toFullScreen()
      }, false)
      document.querySelector('.btn2').addEventListener('click', function () {//点击按钮退出全屏
        exitFullscreen()
      }, false)
      document.addEventListener(typeFullscreenchange, function () {//监听全屏/退出全屏的事件
        if (document[typeFullScreen]) {
          console.log('进入全屏')
        } else {
          console.log('退出全屏')
        }
      }, false);