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

妖狐艹你老母 2022-09-10 00:12 273阅读 0赞

$(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();
    					  
    				 } 
    				   
    			 })
    			 
    			 
    		 })