一起看看JavaScript异步剪贴板API

发布时间：09/01 来源：未知浏览：关键词：

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

此刻 Chrome 66 已经支撑了新的 Async Clipboard API，作为 execCommand 替换品。

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

复制：将文本写入剪贴板

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

图0：JavaScript异步剪贴板 API

与使用权限 API 的任何其它内容一样，可以检查您的利用可否具有与剪贴板交互的权限：

navigator.permissions.query({
  name: 'clipboard-read'
}).then(permissionStatus => {
  // permissionStatus.state 的值是 'granted'、'denied'、'prompt':
  console.log(permissionStatus.state);

  // 监听权限状态改动事件
  permissionStatus.onchange = () => {
    console.log(permissionStatus.state);
  };
});

以下是剪贴板 API 的“异步”部分真正派上用处的地方：尝试读取或写入剪贴板数据将主动提醒会员获得权限（假如尚未授予）。由于 API 是基于 Promise 的，所以假如会员回绝剪贴板权限时，Promise 将被 reject，因此页面可以恰当地作出响应。

由于只要当页面是当前活动选项卡时，Chrome 才同意剪贴板拜访，因此假如直接粘贴到 DevTools 中，则会发明这里的一些示例运转不准确，由于此时 DevTools 本身是活动选项卡（页面不是活动选项卡）。有一个技巧：我们需要使用 setTimeout 延迟剪贴板拜访，然后在调取函数此前快速单击页面内部以使页面猎取焦点：

setTimeout(async () => {
  const text = await navigator.clipboard.readText();
  console.log(text);
}, 2000);

回忆

在引入异步剪贴板 API 此前，我们在 Web 阅读器中混合了不一样的复制和粘贴实现。

在大多数阅读器中，可以使用 document.execCommand('copy') 和触发阅读器本人的复制和粘贴 document.execCommand('paste')。假如要复制的文本是不存在于 DOM 中的字符串，我们必需将其插入到 DOM 中并选中它：

button.addEventListener('click', e => {
  const input = document.createElement('input');
  document.body.appendChild(input);
  input.value = text;
  input.focus();
  input.select();
  const result = document.execCommand('copy');
  if (result === 'unsuccessful') {
    console.error('Failed to copy text.');
  }
})

一样，以下是您怎样在不支撑新的 Async Clipboard API 的阅读器中处置粘贴的内容：

出自：https://github.com/justjavac/the-front-end-knowledge-you-may-not-know/issues/23

document.addEventListener('paste', e => {
  const text = e.clipboardData.getData('text/plain');
  console.log('Got pasted text: ', text);
})

在 Internet Explorer 中，我们也可以通过 window.clipboardData 拜访剪贴板。假如在会员手势内停止拜访（例如点击事件） – 以负责任的方式恳求权限的一部分 – 则不显示权限提醒。

检测和回退

在支撑所有阅读器的同时，使用功效检测来利用异步剪贴板是个不错的主意。您可以通过检查 navigator.clipboard 来检测对 Async Clipboard API 的支撑：

document.addEventListener('paste', async e => {
  let text;
  if (navigator.clipboard) {
    text = await navigator.clipboard.readText()
  }
  else {
    text = e.clipboardData.getData('text/plain');
  }
  console.log('Got pasted text: ', text);
});