今天就跟大家聊聊有關使用JavaScript怎么實現窗口全屏顯示，可能很多人都不太了解，為了讓大家更加了解，小編給大家總結了以下內容，希望大家根據這篇文章可以有所收獲。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>demo</title>
<script src="js/jquery-1.11.3.min.js"></script>
<style>
* {
margin: 0;
padding: 0;
}
/* 窗口全屏樣式 */
html:-moz-full-screen {
background: grey;
}
html:-webkit-full-screen {
background: grey;
}
html:fullscreen {
background: grey;
}
div {
width: 100px;
height: 100px;
background: blue;
}
img {
width: 80px;
height: 80px;
}
</style>
</head>
<body>
<button class="win-fullscreen">窗口全屏</button>
<button class="div-fullscreen">div全屏</button>
<button class="img-fullscreen">img全屏</button>
<button class="exit-fullscreen">退出全屏</button>
<div class="div">
<img class="img" src="images/a.png">
</div>
</body>
<script>
/* 調用示例 */
// 窗口全屏
$('.win-fullscreen').on('click', function() {
requestFullScreen(document.documentElement);
});
// div全屏
$('.div-fullscreen').on('click', function() {
requestFullScreen($('.div')[0]);
});
// img全屏
$('.img-fullscreen').on('click', function() {
requestFullScreen($('.img')[0]);
});
// 退出全屏
$('.exit-fullscreen').on('click', function() {
exitFull();
});
// 窗口狀態改變事件
fullscreenchange(document, function(isFull) {
console.log(isFull);
});
/* 封裝 */
// 窗口狀態改變
function fullscreenchange(el, callback) {
el.addEventListener("fullscreenchange", function () {
callback && callback(document.fullscreen);
});
el.addEventListener("webkitfullscreenchange", function () {
callback && callback(document.webkitIsFullScreen);
});
el.addEventListener("mozfullscreenchange", function () {
callback && callback(document.mozFullScreen);
});
el.addEventListener("msfullscreenchange", function () {
callback && callback(document.msFullscreenElement);
});
}
// 全屏
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>看完上述內容，你們對使用JavaScript怎么實現窗口全屏顯示有進一步的了解嗎？如果還想了解更多知識或者相關內容，請關注億速云行業資訊頻道，感謝大家的支持。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
