网络的剪贴板,以及它如何存储不同类型的数据

主要观点:

  • 探讨了网页剪贴板及其 API,包括异步剪贴板 API、剪贴板事件 API 等,以及不同浏览器对各种数据类型的处理和限制。
  • 介绍了 Google Docs、Figma 等应用中的复制和粘贴按钮的实现方式及相关特性。
  • 提及了原始剪贴板访问的提案及因安全问题未进一步推进,以及 Web 自定义格式(Pickling)提案在 Chromium 中的实现和相关细节。

关键信息:

  • 异步剪贴板 API 限制了可写入和读取的剪贴板数据类型,而剪贴板事件 API 则没有此限制,但只能在用户触发的复制和粘贴事件处理程序中使用。
  • Google Docs 的复制按钮通过document.execCommand("copy")写入多种数据类型到剪贴板,Figma 的复制按钮将数据编码为 base64 放入 HTML 元素的属性中。
  • 原始剪贴板访问提案因安全问题未被采纳,Web 自定义格式提案允许通过异步剪贴板 API 写入自定义数据类型,但存在与原生应用互操作性的权衡。
  • 浏览器在读取剪贴板数据时可能会进行清理,异步剪贴板 API 的read方法有unsanitized选项可请求未清理的数据,但目前仅在 Chromium 浏览器中支持。

重要细节:

  • 2017 年引入异步剪贴板 API,其规范规定了必须支持的三种数据类型text/plaintext/htmlimage/png
  • 2006 年的 W3C 草案定义了clipboardData及其setDatagetData方法,当时未使用 MIME 类型。
  • 2011 年 MIME 类型进入规范,但未确定应使用哪些数据类型,至今仍可使用任意字符串进行setDatagetData
  • Google Docs 在 Macbook 上的粘贴按钮需安装扩展,在 Windows 上可直接使用,不同浏览器在execCommand("paste")的支持上存在不一致。
  • Figma 的复制按钮将数据编码后放入data-metadatadata-buffer属性中,data-buffer使用 Kiwi 消息格式编码 Figma 文件。
  • Chrome 在 Macbook 上写入自定义数据到org.chromium.web-custom-data,Firefox 写入到org.mozilla.custom-clipdata,Safari 写入到com.apple.WebKit.custom-pasteboard-data并存储完整表示和源 URL。
  • Web 自定义格式提案通过前缀"web "来写入自定义数据类型,在 macOS 上映射写入org.w3.web-custom-format.map
阅读 25
0 条评论