使用 JavaScript 切换全屏模式

系统管理员 2023-09-25 13:17 42阅读 0赞

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

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

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

#### 快速笔记 ####

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

#### 示例代码下载 ####

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

### JAVASCRIPT 全屏模式 ###

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

#### 第1部分）切换全屏模式 ####

1-全屏.html

<img id="demo" src="chick.jpg"/>
     
    
    <div>
      
      <input type="button" value="Entire Page"
             onclick="document.documentElement.requestFullscreen()"/>
     
      
      <input type="button" value="Image Only"
             onclick="document.getElementById('demo').requestFullscreen()"/>
     
      
      <input type="button" value="Exit"
             onclick="document.exitFullscreen();"/>
    </div>

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

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

就这么简单。

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

#### 第 2 部分）检测全屏更改 ####

2-事件.html

<input type="button" value="Fullscreen"
           onclick="document.documentElement.requestFullscreen()"/>
    <input type="button" value="Exit"
           onclick="document.exitFullscreen();"/>
     
     
    <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][API] – CanIUse
 *  [箭头功能][Link 2] – CanIUse

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

#### 链接和参考 ####

*  [全屏 API][API 1] – MDN
 *  增强移动设备上的全屏，[锁定屏幕方向][Link 3] \- Code Boxx

####  ####

### 结束 ###

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

[Link 1]: https://code-boxx.com/wp-content/uploads/2021/10/js-fullscreen.zip
[API]: https://caniuse.com/fullscreen
[Link 2]: https://caniuse.com/arrow-functions
[Polyfill _ _ Modernizr]: https://modernizr.com/
[API 1]: https://developer.mozilla.org/en-US/docs/Web/API/Fullscreen_API
[Link 3]: https://code-boxx.com/lock-screen-orientation/