Screenfull.js 使用教程

左萱莉Maude

于 2024-08-08 08:19:55 发布

阅读量528

点赞数 12

本文链接：https://blog.csdn.net/gitblog_01047/article/details/141014681

版权

Screenfull.js 使用教程

screenfullSimple wrapper for cross-browser usage of the JavaScript Fullscreen API项目地址:https://gitcode.com/gh_mirrors/sc/screenfull

项目介绍

Screenfull.js 是一个简单封装，用于跨浏览器使用 JavaScript Fullscreen API 的库。它允许你将页面或任何元素带入全屏模式。Screenfull.js 由 Sindre Sorhus 开发，是一个轻量级的工具，适用于需要在不同浏览器中实现全屏功能的开发者。

项目快速启动

安装

你可以通过 npm 安装 Screenfull.js：

npm install screenfull

或者直接在 HTML 文件中引入：

<script src="https://cdn.jsdelivr.net/npm/screenfull@6.0.2/dist/screenfull.min.js"></script>

基本使用

以下是一个简单的示例，展示如何在按钮点击时将一个元素切换到全屏模式：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Screenfull.js 示例</title>
</head>
<body>
    <div id="fullscreen-element">
        点击按钮进入全屏模式
    </div>
    <button id="toggle-fullscreen">切换全屏</button>

    <script src="https://cdn.jsdelivr.net/npm/screenfull@6.0.2/dist/screenfull.min.js"></script>
    <script>
        document.getElementById('toggle-fullscreen').addEventListener('click', () => {
            if (screenfull.isEnabled) {
                screenfull.toggle(document.getElementById('fullscreen-element'));
            }
        });
    </script>
</body>
</html>