js实现一个全屏和退出全屏的功能-蒲公英云

js实现一个全屏和退出全屏的功能

$(function(){ 
             //全屏
             function fullScreen(){ 
                 var el = document.documentElement;
                 var rfs = el.requestFullScreen || el.webkitRequestFullScreen || el.mozRequestFullScreen || el.msRequestFullScreen;
                 //typeof rfs != "undefined" && rfs
                 if (rfs) { 
                     rfs.call(el);
                 }
                 else if (typeof window.ActiveXObject !== "undefined") { 
                     //for IE，这里其实就是模拟了按下键盘的F11，使浏览器全屏
                     var wscript = new ActiveXObject("WScript.Shell");
                     if (wscript != null) { 
                         wscript.SendKeys("{F11}");
                     }
                 }
                  localStorage.setItem('istoggleFullScreen',0)
             }
             //退出全屏
             function exitScreen(){ 
                 var el = document;
                 var cfs = el.cancelFullScreen || el.webkitCancelFullScreen || el.mozCancelFullScreen || el.exitFullScreen;
                 //typeof cfs != "undefined" && cfs
                 if (cfs) { 
                     cfs.call(el);
                 }
                 else if (typeof window.ActiveXObject !== "undefined") { 
                     //for IE，这里和fullScreen相同，模拟按下F11键退出全屏
                     var wscript = new ActiveXObject("WScript.Shell");
                     if (wscript != null) { 
                         wscript.SendKeys("{F11}");
                     }
                 }
                  localStorage.setItem('istoggleFullScreen',1)
             }
             function checkFull() { 
                 //使用html5中的API判断是否全屏(返回当前全屏的元素)
                 var FullEl = document.fullscreenElement    ||
                     document.msFullscreenElement  ||
                     document.mozFullScreenElement ||
                     document.webkitFullscreenElement;
                 //若是不支持Html5中的API，可以使用以最原始的判断方式，但需要将页面的滚动条去掉
                 if (FullEl === null) { 
                     return isFullscreenForNoScroll();
                 }
                 return true;
             }
             /** * 支持无滚动条的页面以 Fullscreen api启动的全屏 或是 按f11启动的全屏 * 不支持有滚动条的页面 * @returns {boolean} */
             function isFullscreenForNoScroll(){ 
                 var explorer = window.navigator.userAgent.toLowerCase();
                 if(explorer.indexOf('chrome')>0){ //webkit
                     if (document.body.scrollHeight === window.screen.height && document.body.scrollWidth === window.screen.width) { 
                         console.log("全屏");
                         return true;
                     } else { 
                         console.log("不全屏");
                         return false;
                     }
                 }else{ //IE 9+ fireFox
                     if (window.outerHeight === window.screen.height && window.outerWidth === window.screen.width) { 
                         console.log("全屏");
                         return true;
                     } else { 
                         console.log("不全屏");
                         return false;
                     }
                 }
             }
             $("#toggleFullScreen").on("click",function(){  
                 if(!checkFull()){ 
                     fullScreen(); 
                 }else{ 
                      exitScreen();
                 } 
             })
         })