js 复制url

在JavaScript中复制URL到剪贴板可以通过多种方式实现，以下是几种常见的方法：

1. 使用现代Clipboard API (`navigator.clipboard.writeText`)

这是最简单和推荐的方法，但需要用户的交互（例如点击按钮）来触发复制操作，并且在某些浏览器中可能需要HTTPS。

示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>复制URL示例</title>
</head>
<body>
    <input type="text" value="https://www.example.com" id="urlInput" readonly>
    <button id="copyButton">复制URL</button>

    <script>
        document.getElementById('copyButton').addEventListener('click', async () => {
            const url = document.getElementById('urlInput').value;
            try {
                await navigator.clipboard.writeText(url);
                alert('URL已复制到剪贴板');
            } catch (err) {
                console.error('复制失败:', err);
                alert('复制失败，请手动复制');
            }
        });
    </script>
</body>
</html>

优势：

简单易用
异步操作，不会阻塞主线程

应用场景：

用户点击按钮后自动复制页面URL
复制生成的分享链接

2. 使用`document.execCommand('copy')`

这是较旧的方法，兼容性更好，但需要将文本选中。

示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>复制URL示例</title>
</head>
<body>
    <input type="text" value="https://www.example.com" id="urlInput" readonly>
    <button id="copyButton">复制URL</button>

    <script>
        document.getElementById('copyButton').addEventListener('click', () => {
            const urlInput = document.getElementById('urlInput');
            urlInput.select();
            urlInput.setSelectionRange(0, 99999); // 对于移动设备
            try {
                document.execCommand('copy');
                alert('URL已复制到剪贴板');
            } catch (err) {
                console.error('复制失败:', err);
                alert('复制失败，请手动复制');
            }
        });
    </script>
</body>
</html>

优势：

兼容性更好，适用于旧版浏览器

缺点：

需要选中文本，用户体验稍差
不是异步操作

3. 使用第三方库（如clipboard.js）

clipboard.js是一个轻量级的JavaScript库，简化了复制操作。

示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>复制URL示例</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.11/clipboard.min.js"></script>
</head>
<body>
    <input type="text" value="https://www.example.com" id="urlInput" readonly>
    <button class="copy-btn" data-clipboard-target="#urlInput">复制URL</button>

    <script>
        const clipboard = new ClipboardJS('.copy-btn');
        clipboard.on('success', function(e) {
            alert('URL已复制到剪贴板');
            e.clearSelection();
        });
        clipboard.on('error', function(e) {
            console.error('复制失败:', e);
            alert('复制失败，请手动复制');
        });
    </script>
</body>
</html>

优势：