Js utility – Full screen/cancel full screen – Judge browser kernel – Listen for full screen/cancel full screen instances

• Full screen

/** */ function toFullScreen() {let elem = document.body; elem.webkitRequestFullScreen ? elem.webkitRequestFullScreen() : elem.mozRequestFullScreen ? elem.mozRequestFullScreen() : elem.msRequestFullscreen ? elem.msRequestFullscreen() : elem.requestFullScreen ? Elem.requestfullscreen () : alert(" browsers do not support full screen "); }Copy the code

• Cancel the full screen

/ / function fullscreen () {let elem = parent. elem.webkitCancelFullScreen ? elem.webkitCancelFullScreen() : elem.mozCancelFullScreen ? elem.mozCancelFullScreen() : elem.cancelFullScreen ? elem.cancelFullScreen() : elem.msExitFullscreen ? elem.msExitFullscreen() : elem.exitFullscreen ? Elem.exitfullscreen () : alert(" switch failed, try Esc exit "); }Copy the code

• Determine the browser kernel

https://www.cnblogs.com/xtqg0304/p/9516095.html getBrowserType() { let userAgent = navigator.userAgent; Let isOpera = userAgent.indexof ("Opera") > -1; Opera let isIE = userAgent.indexof ("compatible") > -1 && userAgent.indexof ("MSIE") > -1 &&! isOpera; // Check whether IE browser let isEdge = userAgent.indexof ("Edg") > -1; // Check whether IE Edge browser let isFF = userAgent.indexof ("Firefox") > -1; // Check whether Firefox let isSafari = userAgent.indexof ("Safari") > -1 && userAgent.indexof ("Chrome") == -1; Let isChrome = userAgent.indexof ("Chrome") > -1 && userAgent.indexof ("Safari") > -1; // Check Chrome let isIE11 = userAgent.indexof ("Trident/7.0") > -1 && userAgent.indexof ("rv") > -1 &&! isIE && ! isOpera && ! isEdge && ! isFF && ! isSafari && ! isChrome; Ie11 if (isIE) {// 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 not including 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 'not mainstream browser, recommend replacement! '}}Copy the code

• Search for the corresponding browser full-screen attribute

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'
            }
        }
      }
Copy the code

• Comprehensive instance

var typeFullscreenchange = findCorrespondingBrowserFullscreenchange().typeFullscreenchange; var typeFullScreen = findCorrespondingBrowserFullscreenchange().typeFullScreen; Document.queryselector ('.btn1').adDeventListener ('click', function () {// toFullScreen()}, False) document.queryselector ('.btn2').addeventlistener ('click', function () {// click to exitFullscreen()}, false) document.addEventListener(typeFullscreenchange, If (document[typeFullScreen]) {console.log(' enter full screen ')} else {console.log(' exit full screen ')}}, false);Copy the code