- 全屏
<!DOCTYPE html>
<html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
.a {
margin:0 auto;
height:600px;
width:700px;
}
.content {
margin:0 auto;
height:500px;
width:700px;
background:#900;
}
</style>
<body>
<div class="a">
<button id="btn">js控制頁面的全屏展示</button>
<div class="content" id="content">
<h1 id="h1">js控制頁面的全屏展示和退出全屏顯示</h1>
<button id="btn" onclick="exitFull()">js控制頁面的退出全屏顯示</button>
</div>
</div>
</body>
<script type="text/javaScript">
document.getElementById("btn").onclick=function(){
var elem = document.getElementById("content");
var h1 = document.getElementById("h1");
requestFullScreen(elem);// 某個頁面元素
// requestFullScreen(document.documentElement);// 整個網頁
};
function requestFullScreen(element) {
// 判斷各種瀏覽器，找到正確的方法
var requestMethod = element.requestFullScreen || //W3C
element.webkitRequestFullScreen || //Chrome等
element.mozRequestFullScreen || //FireFox
element.msRequestFullScreen; //IE11
if (requestMethod) {
requestMethod.call(element);
}else if (typeof window.ActiveXObject !== "undefined") {//for Internet Explorer
var wscript = new ActiveXObject("WScript.Shell");
if (wscript !== null) {
wscript.SendKeys("{F11}");
}
}
}
//退出全屏 判斷瀏覽器種類
function exitFull() {
// 判斷各種瀏覽器，找到正確的方法
var exitMethod = document.exitFullscreen || //W3C
document.mozCancelFullScreen || //Chrome等
document.webkitExitFullscreen || //FireFox
document.webkitExitFullscreen; //IE11
if (exitMethod) {
exitMethod.call(document);
}else if (typeof window.ActiveXObject !== "undefined") {//for Internet Explorer
var wscript = new ActiveXObject("WScript.Shell");
if (wscript !== null) {
wscript.SendKeys("{F11}");
}
}
}
</script>
</html>
最后編輯于 ：
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發布，文章內容僅代表作者本人觀點，簡書系信息發布平臺，僅提供信息存儲服務。
