WEB全屏API简介及示例

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

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