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

Z时代
2024-01-10
分类：综合

本文实例讲述了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>