全屏及退出全屏

最新推荐文章于 2024-03-28 18:30:23 发布

嘿是我呀

最新推荐文章于 2024-03-28 18:30:23 发布

阅读量543

点赞数

分类专栏：笔记

本文链接：https://blog.csdn.net/weixin_42998230/article/details/108145382

版权

笔记专栏收录该内容

8 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>		
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
		<title></title>
		<style>
			body{
				width:100%;				
			}
			button{
				margin-left:43%;
				background:#000;
				color:#fff;
				height:40px;				
			}
			#content{
				text-align:center;
				margin:0 auto;
				font-size:14px;
				line-height:500px;
				box-shadow: 0 0 10px #454545;
			}
		</style>
	</head>
	<body>  
		<button id="btn">js控制页面的全屏展示和退出全屏显示</button>  
		<div id="content" style="height:500px;width:500px;background:#fff">  
		  <h1>js控制页面的全屏展示和退出全屏显示</h1>  
		</div>  
	</body>  
	<script language="JavaScript">    
		document.getElementById("btn").οnclick=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>