Clipboard API

发表于 分类于 ， 阅读次数： 本文字数： 731 阅读时长 ≈ 3 分钟

Clipboard API

基本介绍

Clipboard API 是现代浏览器提供的 JavaScript API，允许网页以安全可控的方式访问系统剪贴板。它提供了以下核心功能：

  1. 读取剪贴板内容（粘贴操作）

  2. 写入剪贴板内容（复制操作）

  3. 监听剪贴板事件

  4. 处理多种数据类型（文本、HTML、图片等）

主要应用场景

  • 向网页上粘贴图片

  • 复制一些内容，当粘贴后变成另一段文字（比如：不让粘贴之类的文字）

  • 某些购物网站会读取粘贴板上的数据进行读取对应的商品

1. 向网页上粘贴图片

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<body>
  <div class="editor" contenteditable></div>
  <script>
    const editor = document.querySelector('.editor');
    
    editor.addEventListener('paste', (e) => {
      if (e.clipboardData.files.length > 0) {
        e.preventDefault();
        const file = e.clipboardData.files[0];
        const img = document.createElement('img');
        img.src = URL.createObjectURL(file);
        editor.appendChild(img);
      }
    });
  </script>
</body>

代码功能说明：

  1. 创建一个可编辑的div元素（contenteditable属性）

  2. 监听粘贴事件，检查剪贴板中是否有文件

  3. 如果检测到文件（如图片），则：

    • 阻止默认粘贴行为
    • 获取第一个文件
    • 创建img元素并设置src为文件对象URL
    • 将图片插入到编辑器中

2. 复制/粘贴内容转换

1
2
3
4
5
// 复制时转换内容
document.addEventListener('copy', (e) => {
  e.preventDefault(); // 阻止默认复制行为
  navigator.clipboard.weiteText("不准复制，打钱！！！")
});

3. 读取剪贴板数据

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!DOCTYPE html>
<html>
<head>
</head>
<body>
    <div class="editor"></div>
    <script>
        // 修正后的剪贴板读取代码
        navigator.clipboard.readText()
            .then((text) => {
                document.querySelector('.editor').innerHTML = text;
            })
            .catch((error) => {
                console.error('读取剪贴板失败:', error);
                alert('无法读取剪贴板内容');
            });
    </script>
</body>
</html>

高级用法

异步 Clipboard API

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
// 写入剪贴板
async function copyToClipboard(text) {
  try {
    await navigator.clipboard.writeText(text);
    console.log('复制成功');
  } catch (err) {
    console.error('复制失败:', err);
  }
}

// 读取剪贴板
async function pasteFromClipboard() {
  try {
    const text = await navigator.clipboard.readText();
    console.log('粘贴内容:', text);
    return text;
  } catch (err) {
    console.error('读取剪贴板失败:', err);
    return null;
  }
}

安全限制

  1. 权限要求：

    • 写入操作通常不需要特殊权限
    • 读取操作需要用户明确授权（通过权限API请求clipboard-read权限）

  2. 用户交互要求：

    • 剪贴板访问必须在用户触发的事件（如点击）中执行
    • 不能在没有用户交互的情况下自动访问剪贴板

  3. HTTPS要求：

    • 大多数浏览器要求页面通过HTTPS提供服务才能使用Clipboard API

浏览器兼容性

  1. 现代浏览器：Chrome、Edge、Firefox、Safari等主流浏览器均已支持

  2. 兼容性检测：

    1
    2
    3
    4
    if (!navigator.clipboard) {
      console.log('您的浏览器不支持Clipboard API');
      // 提供回退方案
    }

实际应用建议

  1. 提供回退方案：对于不支持Clipboard API的浏览器，可以使用document.execCommand

  2. 清晰的用户提示：当需要读取剪贴板时，明确告知用户并请求权限

  3. 错误处理：妥善处理权限被拒绝的情况

  4. 性能考虑：处理大文件（如图片）时要注意内存使用