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

最新推荐文章于 2024-07-19 15:49:07 发布

weixin_30555125

最新推荐文章于 2024-07-19 15:49:07 发布

阅读量235

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/zwwill/p/7391403.html

本文介绍了一个简单的JavaScript实现页面元素的全屏展示与退出全屏的方法。通过按钮触发，利用HTML5提供的全屏API来实现这一功能。代码适用于现代浏览器，并提供了一种兼容IE的备选方案。

<!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>

转载于:https://www.cnblogs.com/zwwill/p/7391403.html