使用 JavaScript 切换全屏模式-蒲公英云

使用 JavaScript 切换全屏模式

欢迎来到如何使用Javascript切换全屏模式的快速教程和示例。是的，老祖母的互联网时代现在已经结束了。现代Web浏览器可以轻松地在Javascript中切换到全屏模式。

要进入整个页面的全屏模式 –document.documentElement.requestFullscreen()
要进入特定元素的全屏模式 –document.getElementById("ID").requestFullscreen()
最后，用于退出全屏。document.exitFullscreen()

是的，这就是所有基础知识。但是，如果您需要一个实际示例，请继续阅读！

快速笔记

在撰写本文时，已知全屏API在iPhone Safari上不起作用。执行自己的检测和回退。

示例代码下载

点击这里下载源代码，我已经在 MIT 许可证下发布了它，所以请随意在它之上构建或在您自己的项目中使用它。

JAVASCRIPT 全屏模式

好吧，现在让我们进入在 Javascript 中切换全屏模式的示例。

第1部分）切换全屏模式

1-全屏.html

<!-- (A) IMAGE FOR TESTING FULLSCREEN -->
<img id="demo" src="chick.jpg"/>
<!-- (B) FULLSCREEN BUTTONS -->
<div>
  <!-- (B1) ENTIRE PAGE -->
  <input type="button" value="Entire Page"
         onclick="document.documentElement.requestFullscreen()"/>
  <!-- (B2) IMAGE ONLY -->
  <input type="button" value="Image Only"
         onclick="document.getElementById('demo').requestFullscreen()"/>
  <!-- (B3) EXIT FULLSCREEN -->
  <input type="button" value="Exit"
         onclick="document.exitFullscreen();"/>
</div>

是的，正如介绍片段中宣传的那样。

用于进入全屏模式requestFullscreen()
用于退出全屏。exitFullscreen()

就这么简单。

document.documentElement指整个 HTML 文档。因此，会将整个页面设置为全屏模式。document.documentElement.requestFullscreen()
document.getElementById(TARGET).requestFullscreen()是不言自明的…我们仅将页面的特定部分设置为全屏模式。

第 2 部分）检测全屏更改

2-事件.html

<!-- (A) FULLSCREEN BUTTONS -->
<input type="button" value="Fullscreen"
       onclick="document.documentElement.requestFullscreen()"/>
<input type="button" value="Exit"
       onclick="document.exitFullscreen();"/>
 <!-- (B) JAVASCRIPT -->
<script>
// (B) LISTEN TO FULLSCREEN TOGGLE
document.addEventListener("fullscreenchange", () => {
  if (document.fullscreenElement===null) {
    console.log("Exited fullscreen");
  } else {
    console.log("Entered fullscreen");
  }
});
// (C) ON FULLSCREEN ERROR
document.addEventListener("fullscreenerror", (evt) => {
  console.error(evt);
});
</script>