JavaScript 使用 navigator.clipboard.read() 读取剪贴板数据：安全与示例

使用 JavaScript 安全读取剪贴板内容：navigator.clipboard.read()

在网页开发中，你可能需要使用 JavaScript 读取用户的剪贴板内容。navigator.clipboard.read() 方法提供了一种安全的方式来实现这一点。

重要安全提示： 为了保护用户隐私，浏览器要求用户进行交互操作（例如点击按钮）才能调用 navigator.clipboard.read()。直接调用会导致权限错误。

以下是使用 navigator.clipboard.read() 读取剪贴板内容的示例代码：

// 检查浏览器是否支持读取剪贴板内容
if (navigator.clipboard && navigator.clipboard.read) {
  // 用户进行交互操作后调用
  document.getElementById('readButton').addEventListener('click', function() {
    navigator.clipboard.read().then(function(clipboardData) {
      // 读取剪贴板中的内容
      for (var i = 0; i < clipboardData.length; i++) {
        clipboardData[i].getType().then(function(type) {
          clipboardData[i].getType(type).then(function(data) {
            console.log('剪贴板内容:', data);
          });
        });
      }
    }).catch(function(error) {
      console.error('读取剪贴板内容失败:', error);
    });
  });
} else {
  console.error('浏览器不支持读取剪贴板内容');
}

代码解释：

1. 检查浏览器支持： 首先，我们检查浏览器是否支持 navigator.clipboard 和 navigator.clipboard.read()。
2. 用户交互： 我们添加了一个按钮 (readButton)，并监听其点击事件。只有在用户点击按钮后，才会调用 navigator.clipboard.read() 方法。
3. 读取剪贴板数据： navigator.clipboard.read() 返回一个 Promise，该 Promise 解析为一个 ClipboardItem 对象的数组。
4. 获取剪贴板项类型： 使用 getType() 方法获取剪贴板项的类型（例如，'text/plain' 表示文本）。
5. 获取数据： 使用 getType(type) 方法获取对应类型的数据。
6. 错误处理： 使用 .catch() 处理读取剪贴板内容时可能发生的错误。

注意： navigator.clipboard.read() 方法只能读取用户最近一次复制到剪贴板的内容。