<html>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<style>
　　#container {
　　　　position: absolute;
　　　　top: 0;
　　　　left: 0;
　　　　bottom: 0;
　　　　right: 0;
　　　　background-color: red;
　　}
</style>

 

<body>
　　<div id=”container”>
　　　　<div id=”content” style=”margin:0 auto;height:45%;width:80%px; background:orange;”>
　　　　<button id=”btn”>全屏</button>
　　　　<button id=”close”>退出</button>
　　　　<h1>js控制页面部分区域的全屏展示和退出全屏显示</h1>
　　　　</div>
　　</div>
</body>
<script language=”JavaScript”>
var btn = document.getElementById(“btn”);
btn.onclick = function () {
　　var elem = document.getElementById(“content”);
　　requestFullScreen(elem);
};

 

var close = document.getElementById(“close”);
close.onclick = function () {
exitFullscreen();
};

 

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}”);
　　　　}
　　}
}

 

function exitFullscreen() {
　　if (document.exitFullscreen) {
　　　　document.exitFullscreen();
　　} else if (document.msExitFullscreen) {
　　　　document.msExitFullscreen();
　　} else if (document.mozCancelFullScreen) {
　　　　　　document.mozCancelFullScreen();
　　} else if (document.webkitExitFullscreen) {
　　　　　　document.webkitExitFullscreen();
　　}
}

 

</script>

 

</html>

版权声明：本文为webchigan原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://www.cnblogs.com/webchigan/p/11074398.html