在 JavaScript 中获取全屏窗口
Kushank Singh
2022年5月11日
在本教程中，我们将学习如何使用 JavaScript 获取全屏窗口。
全屏 API 帮助我们使用 JavaScript 代码将网页转换为全屏模式。我们可以将它应用于整个文档或单个元素。
检查下面的示例。
function getFullscreenElement() {
return document.fullscreenElement //standard property
|| document.webkitFullscreenElement //safari/opera support
|| document.mozFullscreenElement //firefox support
|| document.msFullscreenElement; //ie/edge support
}
function toggleFullscreen() {
if (getFullscreenElement()) {
document.exitFullscreen();
}
else {
document.getElementById("container").getFullscreenElement().catch(console.log);
}
}
在上面的代码中，getFullscreenElement() 函数中有四个不同的选项，例如 document.fullscreenElement、document.webkitFullscreenElement、document.mozFullscreenElement 和 document.msFullscreenElement，它们使全屏命令与几乎所有浏览器兼容。
toggleFullscreen() 使窗口进入非全屏模式的全屏模式，反之亦然，通过单击 Enter Full-Screen 按钮。我们可以通过以下方式在给定元素上调用此函数。
document.getElementById("button").addEventListener("click", () => {
toggleFullscreen();