使用 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>

对于想要更多控件的你们，想要在用户切换全屏时做一些事情：

• 每当切换全屏模式时，都会触发该事件。fullscreenchange
• document.fullscreenElement包含当前全屏元素。如果是，则用户未处于全屏模式。null
• 当用户在进入全屏模式时遇到问题时，将触发该事件。fullscreenerror

 

 

额外）仅全屏CSS

1-全屏.html

#demo:fullscreen { background: white }

对于那些感兴趣的人，注意到CSS的单行了吗？是的，我们只能用于在元素处于全屏模式时对元素应用样式。:fullscreen

 

有用的位和链接

以上就是主要教程的全部内容，这里有一小节介绍一些可能对您有用的附加功能和链接。

 

兼容性检查

• 全屏 API – CanIUse
• 箭头功能 – CanIUse

我建议进行特征检测并使用Polyfill – 查看 Modernizr。

 

链接和参考

• 全屏 API – MDN
• 增强移动设备上的全屏，锁定屏幕方向 - Code Boxx 

 

结束

感谢您的阅读，本指南已到此结束。我希望它对您的项目有所帮助，如果您想与本指南分享任何内容，请随时在下面发表评论。祝你好运，编码愉快！