JavaScript API Fullscreen 是一个用于在浏览器中全屏显示元素的 JavaScript API

▥前端 ◶2024-03-27 23:15:49 𝄐 0

JavaScript Anywhere,javascript案例代码,Javascript Alert,Javascript API,JAVAscript按钮条件满足变色
JavaScript API Fullscreen 是一个用于在浏览器中全屏显示元素的 JavaScript API。它允许您在网站或应用程序中以全屏模式显示视频、图片、地图等元素，为用户提供更好的体验和视觉效果。

使用 JavaScript API Fullscreen，您可以通过编写简单的 JavaScript 代码来控制全屏模式的进入和退出。以下是一个示例：

html
<!DOCTYPE html>
<html>
<head>
<title>Fullscreen Example</title>
<style>
#fullscreen {
width: 100%;
height: 100%;
background-color: #000;
color: #fff;
font-size: 40px;
text-align: center;
display: none;
}
</style>
</head>
<body>
<div id="fullscreen">
<p>Fullscreen mode activated!</p>
<button onclick="exitFullscreen()">Exit Fullscreen</button>
</div>

<p>Click the button below to activate fullscreen mode:</p>
<button onclick="enterFullscreen()">Enter Fullscreen</button>

<script>
var elem = document.getElementById("fullscreen");

function enterFullscreen() {
if (elem.requestFullscreen) {
elem.requestFullscreen();
} else if (elem.webkitRequestFullscreen) { /* Safari */
elem.webkitRequestFullscreen();
} else if (elem.msRequestFullscreen) { /* IE11 */
elem.msRequestFullscreen();
}
}

function exitFullscreen() {
if (document.exitFullscreen) {
document.exitFullscreen();
} else if (document.webkitExitFullscreen) { /* Safari */
document.webkitExitFullscreen();
} else if (document.msExitFullscreen) { /* IE11 */
document.msExitFullscreen();
}
}

/* Listen for fullscreen change event */
document.addEventListener("fullscreenchange", function () {
if (document.fullscreenElement) {
console.log("Fullscreen mode activated!");
elem.style.display = "block";
} else {
console.log("Fullscreen mode deactivated!");
elem.style.display = "none";
}
});
</script>

</body>
</html>

在这个例子中，我们创建了一个全屏元素 #fullscreen，它包含一个提示消息和一个退出全屏模式的按钮。然后，我们编写两个 JavaScript 函数 enterFullscreen() 和 exitFullscreen()，分别用于进入和退出全屏模式。

当用户点击 Enter Fullscreen 按钮时，我们调用 requestFullscreen() 方法来请求全屏模式。如果浏览器支持全屏 API，它将以全屏模式显示 #fullscreen 元素。

当用户点击 Exit Fullscreen 按钮时，我们调用 exitFullscreen() 方法来退出全屏模式。如果浏览器支持全屏 API，它将退出全屏模式并返回到正常模式。

最后，我们监听 fullscreenchange 事件来检测全屏模式的变化，并在控制台中输出相应的信息。如果全屏模式被激活，我们还会显示 #fullscreen 元素，否则隐藏它。

注意：不同的浏览器可能有不同的前缀或名称来调用全屏 API，因此我们需要使用多个条件来检查它们，并尝试按照正确的顺序调用它们。上面的代码中包含了三个常见的前缀 requestFullscreen、webkitRequestFullscreen 和 msRequestFullscreen。

本文地址： /show-270339.html

${site_name}$

${site_name}$

JavaScript API Fullscreen 是一个用于在浏览器中全屏显示元素的 JavaScript API