WEB全屏API简介及示例

FullScreen API允许页面上的一个元素有一个全屏视图，通常情况下，会在不同的图形或媒体资源（例如视频或图像）中看到这一点，但实际上可以让页面上的任何元素都具有全屏视图。

FullScreen API 目前在 Chrome、Firefox、Opera 和 Edge 中得到很好的支持。

如果需要对 FullScreen API 的跨平台支持，可以使用第三方脚本库 fscreen 或 screenfull。

要在用户的浏览器上启用全屏视图，首先需要使用 Element.requestFullScreen 函数请求获取许可。这与请求访问位置数据不同，浏览器基本上是通过判断用户是否执行了一个特定的操作来批准或拒绝全屏访问，比如单击一个允许按钮来确定请求是否被接受。

如果用户想要退出全屏视图，可以使用通用退出全屏窗口的方式，以及按下退出键。

全屏section

FullScreen API最常用于放大图像和视频，但它们都有自己的小问题需要考虑，所以将从一些更简单的内容开始：一个带有按钮的HTML5页面，将页面部分内容转换为全屏视图。

<div class="container">
    <h1>FullScreen API演示</h1>
    <p>
        FullScreen
        API允许页面上的一个元素有一个全屏视图，通常情况下，会在不同的图形或媒体资源（例如视频或图像）中看到这一点，但实际上可以让页面上的任何元素都具有全屏视图。
    </p>

    <section class="fullscreen-enabled">
        <h2 class="fullscreen-intro">
            一个带有按钮的HTML5页面，将页面部分内容转换为全屏视图。
        </h2>
        <h3 class="fullscreen-more">全屏模式下才会显示的内容</h3>

        <div class="bottom-right">
            <button aria-label="点击切换全屏方式" class="button button-blue">
                全屏方式
            </button>
        </div>
    </section>
</div>
<script type="text/javascript">
    const toggleFullScreen = (el) => {
        if (!document.fullscreenElement) {
            el.requestFullscreen();
            return;
        }
        document.exitFullscreen();
    };

    const button = document.querySelector("button");

    button.addEventListener("click", () => {
        toggleFullScreen(document.querySelector(".fullscreen-enabled"));
    });
</script>

实际效果可以点击查看DEMO。

全屏modal

模态弹窗图层是现代前端主要的弹窗方式，下面来定义一个全屏模态弹窗，主要代码如下：

<div class="container">
    <h1>FullScreen API演示</h1>
    <p>
        FullScreen
        API允许页面上的一个元素有一个全屏视图，通常情况下，会在不同的图形或媒体资源（例如视频或图像）中看到这一点，但实际上可以让页面上的任何元素都具有全屏视图。
    </p>

    <button
        aria-label="点击打开全屏modal"
        class="button fullscreener button-blue"
    >
        全屏 Modal
    </button>
</div>
<section
    role="dialog"
    aria-modal="true"
    aria-labelledby="modalLabel"
    class="fullscreen-enabled fullscreen-modal"
>
    <div class="modal-content">
        <h2 id="modalLabel" class="fullscreen-more">
            全屏模式下才会显示的内容
        </h2>
        <span
            role="button"
            tabindex="0"
            aria-label="Close the modal"
            class="fullscreener close"
        ></span>
        <div class="modalBody">
            <p>
                要在用户的浏览器上启用全屏视图，首先需要使用
                Element.requestFullScreen
                函数请求获取许可。这与请求访问位置数据不同，浏览器基本上是通过判断用户是否执行了一个特定的操作来批准或拒绝全屏访问，比如单击一个允许按钮来确定请求是否被接受。
            </p>
        </div>
    </div>
</section>
<script type="text/javascript">
    const toggleFullScreen = (el) => {
        if (!document.fullscreenElement) {
            el.requestFullscreen();
            return;
        }
        document.exitFullscreen();
    };

    const buttons = document.querySelectorAll(".fullscreener");
    const fullScreenEnabledEl = document.querySelector(".fullscreen-enabled");

    buttons.forEach((button) => {
        button.addEventListener("click", () => {
            toggleFullScreen(fullScreenEnabledEl);
        });
        button.addEventListener("keydown", (e) => {
            if (e.key === "Enter") {
                toggleFullScreen(fullScreenEnabledEl);
            }
        });
    });
</script>

实际效果可以点击查看DEMO。

总结

Fullscreen API 使用起来非常简单，可以为前端带来很多意向不到的效果，除了文章介绍的两种简单使用，还可以用于全屏图片查看。