js 实现浏览器全屏效果(F11)

xiaoxiao2021-02-28  95

<button οnclick="isStart()">全屏</button> <button οnclick="start()">开启全屏模式</button <button οnclick="close()">关闭全屏模式</button> <script>   var _switch = true;     function isStart(){         if (_switch == true) {             start();             _switch = false;         } else {             close();             _switch = true;         };     };     function start()       {              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();           }       }          function close() {                 if (document.exitFullscreen) {               document.exitFullscreen();           }           else if (document.mozCancelFullScreen) {               document.mozCancelFullScreen();           }           else if (document.webkitCancelFullScreen) {               document.webkitCancelFullScreen();           }           else if (document.msExitFullscreen) {               document.msExitFullscreen();           }       }                   document.addEventListener("fullscreenchange", function () {                      fullscreenState.innerHTML = (document.fullscreen) ? "" : "not ";       }, false);                       document.addEventListener("mozfullscreenchange", function () {                     fullscreenState.innerHTML = (document.mozFullScreen) ? "" : "not ";       }, false);                       document.addEventListener("webkitfullscreenchange", function () {                      fullscreenState.innerHTML = (document.webkitIsFullScreen) ? "" : "not ";       }, false);              document.addEventListener("msfullscreenchange", function () {                      fullscreenState.innerHTML = (document.msFullscreenElement) ? "" : "not ";       }, false);  
转载请注明原文地址: https://www.6miu.com/read-81985.html

最新回复(0)