前端复制功能可通过四种方案实现：navigator.clipboard.writetext() 异步高效但兼容性差；document.execcommand(‘copy’) 兼容性好但已过时；clipboard api（polyfill）弥补兼容问题；第三方库如 clipboard.JS 提供便捷封装。使用时需根据项目需求选择，注意安全性、内容过滤、频率限制及 https 保障。
前端复制功能，说白了就是让用户能一键把网页上的内容搞到自己的剪贴板里，方便粘贴到别的地方。这玩意儿用得好，用户体验嗖嗖往上涨。
解决方案
实现前端复制到剪贴板，现在主流的有四种方案，各有千秋：
立即学习“前端免费学习笔记（深入）”；
-
navigator.clipboard.writeText()： 这是官方推荐的现代方法，异步操作，简洁高效。但兼容性是它的软肋，老旧浏览器可能不支持。
-
document.execCommand(‘copy’)： 历史悠久，兼容性好，但已被标记为过时 API，未来可能会被移除。用起来稍微麻烦点，需要先选中要复制的内容。
-
Clipboard API (polyfill)： 针对 navigator.clipboard 的兼容性问题，可以使用 polyfill 库，比如 clipboard-polyfill。这样既能享受新 API 的便利，又能保证兼容性。
-
第三方库： 市面上有很多成熟的第三方库，比如 clipboard.js。它们封装了各种复制方案，使用起来更简单，功能也更强大。
具体选哪个，就看你的项目需求和兼容性要求了。如果追求简洁高效，且不考虑老旧浏览器，navigator.clipboard.writeText() 是首选。如果需要兼容性，document.execCommand(‘copy’) 或 Clipboard API (polyfill) 比较稳妥。如果想要更多功能，或者不想自己处理兼容性问题，第三方库是个不错的选择。
为什么 navigator.clipboard.writeText() 这么香，但又让人犹豫？
这玩意儿是异步的，意味着复制操作不会阻塞主线程，用户体验更好。而且，它还支持复制图片、富文本等复杂内容，想象空间很大。但是，兼容性确实是个问题。在一些老旧浏览器，或者某些特定环境下（比如 HTTPS 缺失），它可能会罢工。所以，用之前最好做个特性检测，看看浏览器支不支持。
if (navigator.clipboard && navigator.clipboard.writeText) { // 支持 navigator.clipboard navigator.clipboard.writeText('要复制的内容') .then(() => { console.log('复制成功！'); }) .catch(err => { console.error('复制失败：', err); }); } else { // 不支持 navigator.clipboard，降级到其他方案 console.log('当前环境不支持 navigator.clipboard，使用备用方案'); // ... 使用 document.execCommand('copy') 或其他方案 }
document.execCommand(‘copy’) 怎么用，才能不踩坑？
这个方法需要先创建一个 textarea 或 input 元素，把要复制的内容放进去，然后选中它，最后执行 document.execCommand(‘copy’)。听起来有点绕，但其实挺简单的。
function copyText(text) { const textarea = document.createElement('textarea'); textarea.value = text; textarea.style.position = 'fixed'; // 避免页面滚动 document.body.appendChild(textarea); textarea.focus(); textarea.select(); try { const successful = document.execCommand('copy'); const msg = successful ? '成功' : '失败'; console.log('复制命令执行结果：' + msg); } catch (err) { console.error('复制命令执行失败：', err); } document.body.removeChild(textarea); } copyText('要复制的内容');
这里有个坑要注意：document.execCommand(‘copy’) 只能在用户事件处理函数中调用（比如点击事件）。否则，浏览器会拒绝执行，认为这是恶意行为。
各种复制方案的安全性如何，有没有什么需要注意的？
复制到剪贴板看似简单，但安全性也不能忽视。恶意网站可能会利用复制功能，诱导用户复制恶意代码，或者窃取用户剪贴板中的敏感信息。
所以，在实现复制功能时，要做好以下几点：
- 对复制的内容进行过滤和转义： 避免复制恶意代码到剪贴板。
- 限制复制的频率： 防止恶意网站滥用复制功能。
- 使用 HTTPS： HTTPS 可以保证数据传输的安全性，防止中间人攻击。
- 告知用户： 在复制敏感信息时，最好给用户一个明确的提示，让用户知道自己在做什么。
总之，前端复制功能虽小，但细节很多。只有充分了解各种方案的优缺点，并做好安全防护，才能真正提升用户体验。
