<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">quan</button>
<div id="content" style="margin:0 auto;height:500px;width:700px; background:#ccc;">
<h1>js控制页面的全屏展示和退出全屏显示</h1>
<button onclick="exit()">退出全屏</button>
</div>
</div>
</body>
<style type="text/css">
</style>
<script language="JavaScript">
document.getElementById("btn").onclick = function() {
var elem = document.getElementById("content");
console.log(elem);
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}");
}
}
}
function exit() {
if (document.exitFullscreen) {
document.exitFullscreen()
} else if (document.webkitCancelFullScreen) {
document.webkitCancelFullScreen()
} else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen()
} else if (document.msExitFullscreen) {
document.msExitFullscreen()
}
}
</script>
</html>