HTML | DOM requestFullscreen() 方法(1)

📌 相关文章

📜 HTML | DOM requestFullscreen() 方法(1)

📅 最后修改于: 2023-12-03 15:31:12.509000 🧑 作者: Mango

HTML | DOM requestFullscreen() 方法

介绍

requestFullscreen() 方法是HTML DOM API中的方法，用于在全屏模式下显示指定的元素。该方法可应用于视频播放器、游戏、幻灯片演示等需要占据整个窗口的场景。

该方法支持全屏监听器和全屏退出监听器。在全屏模式下，用户可使用 ESC 键退出全屏。常用的方法有 requestFullscreen()、exitFullscreen()、fullscreenElement 和 fullscreenEnabled。

语法

element.requestFullscreen();

其中，element 是要全屏显示的元素。该元素可以是指定元素的ID，也可以是一个由页面上的JavaScript对象表示的元素。

示例

下面是一个简单的示例，展示如何使用requestFullscreen()方法实现全屏显示。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>DOM requestFullscreen() Method</title>
</head>
<body>
    <h1>DOM requestFullscreen() Method</h1>
    <p>点击下面的按钮，将视频全屏显示。</p>
    <video id="myVideo" width="640" height="360" controls>
        <source src="myVideo.mp4" type="video/mp4">
    </video>
    <button onclick="fullScreen()">全屏显示</button>
    <script>
        var myVideo = document.getElementById("myVideo");
        function fullScreen() {
            if (myVideo.requestFullscreen) {
                myVideo.requestFullscreen();
            } else if (myVideo.mozRequestFullScreen) {
                myVideo.mozRequestFullScreen();
            } else if (myVideo.webkitRequestFullscreen) {
                myVideo.webkitRequestFullscreen();
            }
        }
    </script>
</body>
</html>

上述示例中，当用户点击全屏显示按钮时，调用了fullScreen()方法，该方法调用了requestFullscreen()方法将视频全屏显示。

兼容性

如需兼容所有主流浏览器，可使用如下代码：

if (elem.requestFullscreen) {
  elem.requestFullscreen();
} else if (elem.mozRequestFullScreen) { /* Firefox */
  elem.mozRequestFullScreen();
} else if (elem.webkitRequestFullscreen) { /* Chrome, Safari and Opera */
  elem.webkitRequestFullscreen();
} else if (elem.msRequestFullscreen) { /* IE/Edge */
  elem.msRequestFullscreen();
}

需要注意的是，全屏模式不受同源策略的限制，但在某些浏览器中，会有安全提示。

总结

HTML DOM API 中的requestFullscreen()方法可应用于多种场景，如视频播放器、游戏、幻灯片演示等需要占据整个窗口的应用。使用时需要注意兼容性问题和安全性问题。