Chrome 66 新增异步剪贴板 API

Hanks10100 发布于2019-08-01 18:42 / 1952人阅读

摘要：它很适合用于阅读剪贴板文本的新异步方法安全和权限剪贴板访问一直为浏览器带来安全问题。让网页不受限制地读取剪贴板更加麻烦。为了防止滥用，只有当页面处于活动选项卡时才允许剪贴板访问。

在过去的几年里我们只能使用 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" }

prompt { // 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 的浏览器中处理粘贴的内容：

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);
});

异步剪贴板 API 的下一步是什么？

正如你可能已经注意到的那样，这篇文章只涵盖了 navigator.clipboard 的文本部分。规范中有更多的通用 read() 和 write() 方法，但是这些会带来额外的实现复杂性和安全性问题（请记住那些图像炸弹？）。目前，Chrome 正在推出更简单的 API 文本部分。

更多信息

Chrome 平台状态

代码示例

API

解释

实施方案

讨论

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/52029.html

Chrome 66 新增异步剪贴板 API

摘要：它很适合用于阅读剪贴板文本的新异步方法安全和权限剪贴板访问一直为浏览器带来安全问题。让网页不受限制地读取剪贴板更加麻烦。为了防止滥用，只有当页面处于活动选项卡时才允许剪贴板访问。在过去的几年里我们只能使用 document.execCommand 来操作剪贴板。不过，这种操作剪贴板的操作是同步的，并且只能读取和写入 DOM。现在 Chrome 66 已经支持了新的 Async Cl...

lk20150415 2019-08-22 15:30 评论0 收藏0
Chrome 66 Beta：CSS 类型对象模型，异步剪贴板 API，AudioWorklet，等

摘要：在中，针对属性的一个子集实现了类型对象模型，这些属于的一部分。返回一个对象，该对象指定每个受限制属性的值或值范围。例如，这会在导航请求期间发生。按照规范，已被删除。原文链接：Chrome 66 Beta: CSS Typed Object Model, Async Clipboard API, AudioWorklet 除非另有说明，否则下文所述的更改适用于 Android，Ch...

ralap 2019-08-22 15:49 评论0 收藏0
Chrome 66 Beta：CSS 类型对象模型，异步剪贴板 API，AudioWorklet，等

摘要：在中，针对属性的一个子集实现了类型对象模型，这些属于的一部分。返回一个对象，该对象指定每个受限制属性的值或值范围。例如，这会在导航请求期间发生。按照规范，已被删除。原文链接：Chrome 66 Beta: CSS Typed Object Model, Async Clipboard API, AudioWorklet 除非另有说明，否则下文所述的更改适用于 Android，Ch...

张宪坤 2019-08-02 10:02 评论0 收藏0
FCC 成都社区·前端周刊第 5 期

摘要：发布一直是数据可视化的不错选择。本次发布的版本的更新包括使用代替回调函数，等高线图和密度图。详情发布该版本更新包括模块调整，模块新增函数判断终端是否支持颜色，弃用函数和等。 01. D3.js 5.0 发布 D3 一直是 JavaScript 数据可视化的不错选择。本次发布的 5.0 版本的更新包括：使用 Promise 代替回调函数，等高线图和密度图。详情：https://gith...

mengera88 2019-08-30 14:20 评论0 收藏0
FCC 成都社区·前端周刊第 5 期

摘要：发布一直是数据可视化的不错选择。本次发布的版本的更新包括使用代替回调函数，等高线图和密度图。详情发布该版本更新包括模块调整，模块新增函数判断终端是否支持颜色，弃用函数和等。 01. D3.js 5.0 发布 D3 一直是 JavaScript 数据可视化的不错选择。本次发布的 5.0 版本的更新包括：使用 Promise 代替回调函数，等高线图和密度图。详情：https://gith...

Jinkey 2019-08-22 15:56 评论0 收藏0