必须在安全域中运行
安全域指的是 HTTPS 或 localhost 环境。非安全域(如 http://example.com)下调用 navigator.clipboard.writeText() 会报错,例如:
bash
Uncaught TypeError: Cannot read property 'writeText' of undefined
该 API 必须在用户触发的事件(如点击按钮)中调用,否则会被浏览器拦截。
为了在所有环境中实现复制功能,可以采用以下兼容方案:
-
优先使用现代 API 如果环境支持 navigator.clipboard,优先使用它以确保性能和安全性。
-
回退到传统方法 在非安全域或旧版浏览器中,可以使用 document.execCommand('copy') 实现文本复制。
实现代码:
bash
function copyToClipboard(text) {
// 检查 Clipboard API 是否可用
if (navigator.clipboard && typeof navigator.clipboard.writeText === "function") {
return navigator.clipboard.writeText(text).then(() => {
console.log("文本已成功复制到剪贴板(安全域)。");
}).catch((err) => {
console.error("复制失败:", err);
});
} else {
// 非安全域或不支持 Clipboard API,使用 execCommand 兼容
const textarea = document.createElement("textarea");
textarea.value = text;
textarea.style.position = "fixed"; // 避免影响页面布局
textarea.style.top = "-9999px";
document.body.appendChild(textarea);
textarea.select();
try {
const successful = document.execCommand("copy");
console.log(successful ? "文本已成功复制到剪贴板(非安全域)。" : "复制失败");
} catch (err) {
console.error("复制失败:", err);
}
document.body.removeChild(textarea);
}
}