jquery实现浏览器全屏和浏览器退出全屏

2019独角兽企业重金招聘Python工程师标准>>>

js方法如下：

/*
 * 浏览器全屏
 */
function fullScreen() {

	  var el = document.documentElement;

	  var rfs = el.requestFullScreen || el.webkitRequestFullScreen;

	  if(typeof rfs != "undefined" && rfs) {

	    rfs.call(el);

	  } else if(typeof window.ActiveXObject != "undefined") {

	    var wscript = new ActiveXObject("WScript.Shell");

	    if(wscript != null) {

	        wscript.SendKeys("{F11}");

	    }

	}else if (el.msRequestFullscreen) {

		el.msRequestFullscreen();

	}else if(el.oRequestFullscreen){
		
		el.oRequestFullscreen();
		
    }else{
    	
    	swal({   title: "浏览器不支持全屏调用！",   text: "请更换浏览器或按F11键切换全屏！(3秒后自动关闭)", type: "error",  timer: 3000 });	
	       
    }

}

/*
 * 浏览器退出全屏
 */
function exitFullScreen() {

	  var el = document;

	  var cfs = el.cancelFullScreen || el.webkitCancelFullScreen || el.exitFullScreen;

	  if(typeof cfs != "undefined" && cfs) {

	    cfs.call(el);

	  } else if(typeof window.ActiveXObject != "undefined") {

	    var wscript = new ActiveXObject("WScript.Shell");

	    if(wscript != null) {

	        wscript.SendKeys("{F11}");

	    }

	}else if (el.msExitFullscreen) {

		el.msExitFullscreen();

	}else if(el.oRequestFullscreen){
		
		el.oCancelFullScreen();
		
    }else{ 
   	
    	swal({   title: "浏览器不支持全屏调用！",   text: "请更换浏览器或按F11键切换全屏！(3秒后自动关闭)", type: "error",  timer: 3000 });	
    }  
	  
}

此处没有支持火狐浏览器，是因为火狐已经不支持mozRequestFullScreen();的调用，会提示：

全屏请求被拒绝，因为 Element.mozRequestFullScreen() 不是在一个短期运行的由用户引发的事件处理代码段中运行的。

可以改成window.open()，这里根据项目实际情况改为提示信息。

在指定页面上引入

<script type="text/javascript" src="/jsFile/index/fullScreen.js"></script>	

在页面上调用对应的js方法

<li class="dropdown">
	<a href="javascript:fullScreen();">
		<i class="fa fa-desktop"></i> 全屏
	</a>
</li>
<li class="dropdown">
	<a href="javascript:exitFullScreen();">
		<i class="fa fa-desktop"></i> 退出全屏
	</a>
</li>

 

转载于:https://my.oschina.net/aixiaohua/blog/673002