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>