JavaScript 中如何复制内容到剪贴板

技术背景

在前端开发中，将内容复制到剪贴板是一个常见的需求，比如复制链接、复制文本等。为了实现这一功能，浏览器提供了多种 API 可供选择。

实现步骤

1. 异步剪贴板 API（Async Clipboard API）

• 支持情况：从 Chrome 66（2018 年 3 月）开始支持文本复制部分。仅支持通过 HTTPS 提供的页面。在 Chrome 66 中，非活动标签页可以在不提示权限的情况下写入剪贴板。
• 使用方式：访问是异步的，使用 JavaScript Promises，这样安全用户提示（如果显示）不会中断页面中的 JavaScript。可以直接从变量中将文本复制到剪贴板。

var text = "Example text to appear on clipboard";
navigator.clipboard.writeText(text).then(function() {
    console.log('Async: Copying to clipboard was successful!');
}, function(err) {
    console.error('Async: Could not copy text: ', err);
});

2. document.execCommand('copy')（已弃用）

• 支持情况：截至 2015 年 4 月左右，大多数浏览器都支持此方法。如 Internet Explorer 10+、Google Chrome 43+、Mozilla Firefox 41+、Opera 29+。
• 使用方式：访问是同步的，即会停止页面中的 JavaScript，直到完成操作，包括显示和用户与任何安全提示进行交互。文本从 DOM 中读取并放置在剪贴板上。

var copyTextareaBtn = document.querySelector('.js-textareacopybtn');

copyTextareaBtn.addEventListener('click', function(event) {
    var copyTextarea = document.querySelector('.js-copytextarea');
    copyTextarea.focus();
    copyTextarea.select();

    try {
        var successful = document.execCommand('copy');
        var msg = successful ? 'successful' : 'unsuccessful';
        console.log('Copying text command was ' + msg);
    } catch (err) {
        console.log('Oops, unable to copy');
    }
});

3. 覆盖复制事件

允许从任何复制事件中修改剪贴板上显示的内容，还可以包含除纯文本之外的其他数据格式，但本文不详细介绍，因为它没有直接回答如何复制到剪贴板的问题。

核心代码

异步 + 回退方案

由于新的异步剪贴板 API 的浏览器支持程度不同，为了获得更好的浏览器兼容性，通常需要回退到 document.execCommand('copy') 方法。

function fallbackCopyTextToClipboard(text) {
    var textArea = document.createElement("textarea");
    textArea.value = text;

    // Avoid scrolling to bottom
    textArea.style.top = "0";
    textArea.style.left = "0";
    textArea.style.position = "fixed";

    document.body.appendChild(textArea);
    textArea.focus();
    textArea.select();

    try {
        var successful = document.execCommand('copy');
        var msg = successful ? 'successful' : 'unsuccessful';
        console.log('Fallback: Copying text command was ' + msg);
    } catch (err) {
        console.error('Fallback: Oops, unable to copy', err);
    }

    document.body.removeChild(textArea);
}
function copyTextToClipboard(text) {
    if (!navigator.clipboard) {
        fallbackCopyTextToClipboard(text);
        return;
    }
    navigator.clipboard.writeText(text).then(function() {
        console.log('Async: Copying to clipboard was successful!');
    }, function(err) {
        console.error('Async: Could not copy text: ', err);
    });
}

var copyBobBtn = document.querySelector('.js-copy-bob-btn'),
    copyJaneBtn = document.querySelector('.js-copy-jane-btn');

copyBobBtn.addEventListener('click', function(event) {
    copyTextToClipboard('Bob');
});

copyJaneBtn.addEventListener('click', function(event) {
    copyTextToClipboard('Jane');
});

最佳实践

• 使用异步剪贴板 API：如果浏览器支持，优先使用 navigator.clipboard.writeText 方法，因为它提供了更现代和安全的方式。
• 回退机制：为了确保在不支持异步剪贴板 API 的浏览器中也能正常工作，使用 document.execCommand('copy') 作为回退方案。
• 用户交互：所有复制操作都应该在用户操作（如点击事件）的直接结果中执行，以避免意外修改用户的剪贴板。

常见问题

1. 控制台测试不工作

在控制台测试剪贴板相关命令时，通常需要页面处于活动状态（异步剪贴板 API）或需要用户交互（如用户点击）才能访问剪贴板。

2. 跨域 IFRAME 权限问题

由于跨域 IFRAME 的权限弃用和其他 IFRAME “沙盒” 机制，嵌入式演示可能在某些浏览器（包括 Chrome 和 Microsoft Edge）中无法正常工作。建议创建自己的网页，并通过 HTTPS 连接进行测试和开发。

3. 浏览器兼容性问题

不同浏览器实现和版本在调用 document.execCommand、document.queryCommandSupported 或 document.queryCommandEnabled 时可能会抛出不同类型的异常，而不是返回 false。因此，所有相关调用都应该包裹在 try/catch 块中。同时，由于剪贴板 API 仍处于草案阶段，不同浏览器的实现可能会有所不同，需要进行充分的测试。