写在前面

在IM聊天对话窗口、网页代码编译器或代码块展示等场景中，为了方便用户快速获取内容，往往会提供一个“一键复制”的功能。

比如知音楼右键消息的复制/网页编译器代码内容右键的复制/某论坛对于代码的一键复制按钮：

目前Web API提供过两种方法，支持js复制网页中目标内容(操作剪贴板)，有先进的有即将废弃的。由于比较新的方法容易引起兼容性问题，所以旧方法濒临废弃但不能完全舍弃。

下面将会详细介绍一下这两种方法，并分别针对文本复制和图片复制，详细介绍我经多次尝试总结的兼容性方法。

API梳理

navigator.clipboard.write系列

相关MDN外链地址

https://developer.mozilla.org/zh-CN/docs/Web/API/Clipboard_API

(请复制链接到浏览器中打开）

兼容性

上图可观，在较新浏览器版本下，仅火狐的安卓端完全不支持Clipboard API提供的写入方法。但要注意的是，由于这两个方法涉及用户权限获取，一些客户端提供的WebView通常会直接禁掉对它们的使用，这种情况虽与浏览器的版本关系不大，但这些方法也无法正常使用。

使用方式

Clipboard API提供了两种将不同类型的内容写入剪贴板的方法：

writeText()