<!doctype html>
<html>
<head>
<title>全屏顯示</title>
<meta charset="utf-8" />
<style>
div {
width: 200px;
height:200px;
background:pink;
margin:100px auto;
}
button {
margin-left: 650px;
}
h1 {
margin-left: 400px;
}
</style>
</head>
<body>
<h1>js控制頁(yè)面的全屏展示和退出全屏顯示</h1>
<div id="div1"></div>
<button type="button" id="btn">全屏</button>
</body>
</html>
方法一：
<script type="text/javascript">
window.onload =function(){
document.getElementById("btn").onclick = function(){
var elem =document.getElementById("div1");
requestFullScreen(elem);
}
var requestFullScreen=function(element) {
//某個(gè)元素有請(qǐng)求
var requestMethod =element.requestFullScreen
||element.webkitRequestFullScreen //谷歌
||element.mozRequestFullScreen //火狐
||element.msRequestFullScreen; //IE11
if (requestMethod) {
requestMethod.call(element); //執(zhí)行這個(gè)請(qǐng)求的方法
} else if (typeof window.ActiveXObject !== "undefined") { //window.ActiveXObject判斷是否支持ActiveX控件
//這里其實(shí)就是模擬了按下鍵盤的F11，使瀏覽器全屏
var wscript = new ActiveXObject("WScript.Shell"); //創(chuàng)建ActiveX
if (wscript !== null) { //創(chuàng)建成功
wscript.SendKeys("{F11}");//觸發(fā)f11
}
}
}
}
</script>
方法二：
<script>
var btn = document.getElementById("btn");
btn.onclick = function() {
var width = window.screen.width;
var height = window.screen.height;
var elem = document.getElementById("div1");
requestFullScreen(elem);
}
function requestFullScreen(element) {
if (element.requestFullscreen) {
element.requestFullscreen();
}
//FireFox
else if (element.mozRequestFullScreen) {
element.mozRequestFullScreen();
}
//Chrome等
else if (element.webkitRequestFullScreen) {
element.webkitRequestFullScreen();
}
//IE11
else if (element.msRequestFullscreen) {
element.msRequestFullscreen();
}
};
</script>
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。
