现代浏览器支持clipboard api，可安全异步读写剪贴板。1. 检测navigator.clipboard是否存在以判断兼容性；2. 用writetext()写入文本；3. 用readtext()读取文本，需用户触发；4. 受同源与权限限制，仅https或localhost可用，需用户手势激活，建议检查权限并处理异常。
现代浏览器提供了 Clipboard API，让前端 JavaScript 能够直接读取和写入系统剪贴板内容。相比过去的 document.execCommand('copy') 方法，新的 API 更安全、更灵活，且支持异步操作。
1. 检测浏览器是否支持 Clipboard API
在使用之前，先判断当前环境是否支持 navigator.clipboard：
- if (!navigator.clipboard) {
- console.log('当前浏览器不支持 Clipboard API');
- return;
- }
大多数现代浏览器（Chrome、Edge、Firefox、Safari）都已支持，但部分低版本仍需降级处理。
2. 写入文本到剪贴板
使用 navigator.clipboard.writeText() 可以将字符串写入剪贴板：
立即学习“Java免费学习笔记（深入）”；
- async function copyText(text) {
- try {
- await navigator.clipboard.writeText(text);
- console.log('文本已复制到剪贴板');
- } catch (err) {
- console.error('复制失败:', err);
- }
- }
调用示例：copyText('Hello, clipboard!')
3. 从剪贴板读取文本
使用 navigator.clipboard.readText() 读取用户授权后的剪贴板内容：
- async function pasteText() {
- try {
- const text = await navigator.clipboard.readText();
- console.log('剪贴板内容:', text);
- return text;
- } catch (err) {
- console.error('读取失败:', err);
- }
- }
注意：readText() 需要用户触发（如点击按钮），不能在页面加载时自动执行。
4. 安全与权限限制
Clipboard API 受同源策略和用户权限控制：
- 只能在 HTTPS 环境或 localhost 下使用
- writeText 和 readText 必须在用户手势（click、keypress）中调用
- 某些浏览器会弹出权限请求，可手动检查权限状态：
- async function checkPermission() {
- const permission = await navigator.permissions.query({
- name: 'clipboard-write'
- });
- if (permission.state === 'granted' || permission.state === 'prompt') {
- // 可以执行写入操作
- }
- }
基本上就这些。合理使用 Clipboard API 能提升用户体验，比如一键复制链接、提取内容等场景。注意处理异常并提供降级方案，确保兼容性。
