解析浏览器中拷贝粘贴的技术原理与实现

应用场景

关于拷贝粘贴的场景，大致上可划分以下两种

• 浏览器内（网页内和网页间）拷贝粘贴
• 系统中的任意进程与浏览器之间互相拷贝粘贴

限制

分析了应用场景之后，我们需要确定操作系统和浏览器的一些限制

1. 是否有跨源（cross-origin）限制，即不同源的网页之间是否可以互相拷贝数据
2. 是否被浏览器纳入网站权限控制列表中（因为需要访问系统资源，即剪切板）
3. 能拷贝的最大字节数是多少
4. 浏览器网页与系统其他进程之间、浏览器网页内、浏览器网页间的拷贝粘贴是否有区别

技术原理

拷贝粘贴的实质是系统剪切板 I/O（输入/输出），剪切板是操作系统内核维护的一块内存缓冲区，操作系统规定了这块内存缓冲区的最大大小，因此任何进程都不能拷贝超过这个大小的数据，浏览器可能会对它的访问增加进一步的限制，比如最大拷贝字节数，访问网站白名单，只能在用户触发的事件回调函数中访问等，这些额外的限制可能会导致在大量数据拷贝、跨站拷贝粘贴以及非用户事件回调等场景访问受限的问题，因此针对这些受限场景，应采取合适的解决方案或给予用户明确的提示

浏览器 API

浏览器目前主要提供了两种 API 用于支持剪切板 I/O

• Document.execCommand()
• Clipboard API and events

Document.execCommand()

document.execCommand 的主要用途是实现富文本编辑功能，它定义了一系列操作命令用来实现插入、删除、编辑文本、超链接、表格、列表、图片等内容，调整内容的样式、大小、布局，拷贝、剪切、粘贴内容，撤销与重做等功能，因此并没有提供直接访问系统剪切板的接口，我们需要按照它所定义的富文本编辑的模式间接达到访问剪切板的目的

拷贝/剪切

由于 document.execCommand 是针对富文本编辑设计的 API，它所定义的命令的操作对象是 DOM 元素，拷贝/粘贴也不例外，因此我们首先需要将待拷贝的数据转换成 DOM 元素，然后选中它，才能成功执行拷贝操作（document.execCommand("copy")）

例如：

<p>
  Email me at
  <a class="js-emaillink" href="mailto:matt@example.co.uk">
    matt@example.co.uk
  </a>
</p>