js控制页面的全屏展示和退出全屏显示的方法

2024-05-06 16:16:22

字体：大中小

来源：转载

供稿：网友

这篇文章主要介绍了js控制页面的全屏展示和退出全屏显示的方法,实例分析了javascript控制页面全屏效果的技巧,具有一定参考借鉴价值,需要的朋友可以参考下

本文实例讲述了js控制页面的全屏展示和退出全屏显示的方法。分享给大家供大家参考。具体实现方法如下：

复制代码代码如下:

		<!DOCTYPE html>    
		<html>    
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />    
		<body>    
		<div style="margin:0 auto;height:600px;width:700px;">  
		<button id="btn">js控制页面的全屏展示和退出全屏显示</button>    
		<div id="content" style="margin:0 auto;height:500px;width:700px; background:#ccc;" >  
		<h1>js控制页面的全屏展示和退出全屏显示</h1>    
		</div>  
		</div>    
		</body>    
		<script language="JavaScript">      
		document.getElementById("btn").onclick=function(){     
		    var elem = document.getElementById("content");      
		    requestFullScreen(elem);     
		};     
		function requestFullScreen(element) {    
		    var requestMethod = element.requestFullScreen || element.webkitRequestFullScreen || element.mozRequestFullScreen || element.msRequestFullScreen;    
		    if (requestMethod) {      
		        requestMethod.call(element);    
		    } else if (typeof window.ActiveXObject !== "undefined") {      
		        var wscript = new ActiveXObject("WScript.Shell");    
		        if (wscript !== null) {    
		            wscript.SendKeys("{F11}");    
		        }    
		    }    
		}    
		</script>    
		</html>