前端复制功能可通过四种方案实现：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 可以保证数据传输的安全性，防止中间人攻击。
- 告知用户： 在复制敏感信息时，最好给用户一个明确的提示，让用户知道自己在做什么。
总之，前端复制功能虽小，但细节很多。只有充分了解各种方案的优缺点，并做好安全防护，才能真正提升用户体验。
