Chrome 66 新增异步剪贴板 API

在过去的几年里我们只能使用 document.execCommand 来操作剪贴板。不过，这种操作剪贴板的操作是同步的，并且只能读取和写入 DOM。

现在 Chrome 66 已经支持了新的 Async Clipboard API，作为 execCommand 替代品。

这个新的 Async Clipboard API 还可以使用 Promise 来简化剪贴板事件并将它们与 Drag-&-Drop API 一起使用。

演示视频：https://zhuanlan.zhihu.com/p/...

复制：将文本写入剪贴板

writeText() 可以把文本写入剪切板。writeText() 是异步的，它返回一个 Promise：

navigator.clipboard.writeText(‘要复制的文本‘)
  .then(() => {
    console.log(‘文本已经成功复制到剪切板‘);
  })
  .catch(err => {
    // This can happen if the user denies clipboard permissions:
    // 如果用户没有授权，则抛出异常
    console.error(‘无法复制此文本：‘, err);
  });

还可以使用异步函数 的 async 和 await：

async function copyPageUrl() {
  try {
    await navigator.clipboard.writeText(location.href);
    console.log(‘Page URL copied to clipboard‘);
  } catch (err) {
    console.error(‘Failed to copy: ‘, err);
  }
}

粘贴：从剪贴板中读取文本

和复制一样，可以通过调用 readText() 从剪贴板中读取文本，该函数也返回一个 Promise：

navigator.clipboard.readText()
  .then(text => {
    console.log(‘Pasted content: ‘, text);
  })
  .catch(err => {
    console.error(‘Failed to read clipboard contents: ‘, err);
  });

为了保持一致性，下面是等效的异步函数：

async function getClipboardContents() {
  try {
    const text = await navigator.clipboard.readText();
    console.log(‘Pasted content: ‘, text);
  } catch (err) {
    console.error(‘Failed to read clipboard contents: ‘, err);
  }
}

处理粘贴事件

有计划推出检测剪贴板更改的新事件，但现在最好使用“粘贴”事件。它很适合用于阅读剪贴板文本的新异步方法：

document.addEventListener(‘paste‘, event => {
  event.preventDefault();
  navigator.clipboard.readText().then(text => {
    console.log(‘Pasted text: ‘, text);
  });
});

安全和权限

剪贴板访问一直为浏览器带来安全问题。如果没有适当的权限，页面可能会悄悄地将所有恶意内容复制到用户的剪贴板，粘贴时会产生灾难性的结果。想象一下，一个网页，静静地复制 rm -rf / 或解压缩炸弹图像到剪贴板。

让网页不受限制地读取剪贴板更加麻烦。用户经常将敏感信息（如密码和个人详细信息）复制到剪贴板，然后可以通过任何页面阅读，而用户根本无法察觉。

与许多新的 API 一样，navigator.clipboard 仅支持通过 HTTPS 提供的页面。为了防止滥用，只有当页面处于活动选项卡时才允许剪贴板访问。活动选项卡中的页面可以在不请求权限的情况下写入剪贴板，但从剪贴板中读取始终需要权限。

为了更容易，复制和粘贴的两个新权限已添加到 Permissions API 中。当页面处于活动选项卡时，clipboard-write 权限会自动授予页面。当您通过从剪贴板中读取数据时，则必须要求获取 clipboard-read 权限。

{ name: ‘clipboard-read‘ }
{ name: ‘clipboard-write‘ }