解决JS复制报错：Cannot read properties of undefined (reading 'writeText')
本文解析了JavaScript中使用navigator.clipboard.writeText()在非安全域（如HTTP）下报错Cannot read properties of undefined的原因。通过检测isSecureContext，结合document.execCommand实现兼容方案，确保复制功能在本地及生产环境均能正常工作。
如需直接查看解决方案，请跳转至文末的【完整代码】部分。
问题描述
开发「复制」功能
利用浏览器提供的原生功能 navigator.clipboard 返回的 Clipboard 对象，调用其 writeText() 方法将文本写入剪贴板。
在本地开发环境中，例如访问 http://127.0.0.1:8088 或 http://localhost:8088 进行调试时，该功能运行正常。然而，当使用绑定Host或访问不安全域名（即域名配合http协议）时，执行此功能会触发以下报错：
Uncaught TypeError: Cannot read properties of undefined (reading 'writeText')
原因分析
安全问题
大家可能都有过复制个人信息后粘贴到其他地方的经历，这看似方便，但若遇到恶意钓鱼网站，剪贴板中的信息将暴露无遗。鉴于网络信息安全至关重要，navigator.clipboard 在此方面采取了严格的防御措施。
因此，根本原因在于浏览器禁用了非安全域下的 navigator.clipboard 对象。
安全域涵盖本地访问地址以及启用了TLS安全认证的地址，例如 https 协议地址、127.0.0.1 或 localhost。
问题解决
解决此问题的关键在于编写兼容代码：在安全域环境下使用 navigator.clipboard 以提升效率，而在非安全域环境下则回退到 document.execCommand('copy') 以确保复制功能持续可用。
document.execCommand
这里先介绍 document.execCommand。
熟悉原生 Editor 编辑器的开发者应该了解这个API。该API提供了多种方法，如加粗、斜体、调整字号、设置字体颜色、插入图片或链接、复制、剪切、撤销等（具体可参考MDN文档，但该API已被官方废弃）。
「复制」功能示例：
function copy(text = ''){
let input = document.createElement('input')
input.style.position = 'fixed'
input.style.top = '-10000px'
input.style.zIndex = '-999'
document.body.appendChild(input)
input.value = text
input.focus()
input.select()
try {
let result = document.execCommand('copy')
document.body.removeChild(input)
if (!result || result === 'unsuccessful') {
console.log('复制失败')
} else {
console.log('复制成功')
}
} catch (e) {
document.body.removeChild(input)
alert('当前浏览器不支持复制功能，请检查更新或更换其他浏览器操作')
}
}
完整代码
function copyToClipboard(textToCopy) {
// navigator clipboard 需要https等安全上下文
if (navigator.clipboard && window.isSecureContext) {
// navigator clipboard 向剪贴板写文本
return navigator.clipboard.writeText(textToCopy);
} else {
// document.execCommand('copy') 向剪贴板写文本
let input = document.createElement('input')
input.style.position = 'fixed'
input.style.top = '-10000px'
input.style.zIndex = '-999'
document.body.appendChild(input)
input.value = textToCopy
input.focus()
input.select()
try {
let result = document.execCommand('copy')
document.body.removeChild(input)
if (!result || result === 'unsuccessful') {
console.log('复制失败')
} else {
console.log('复制成功')
}
} catch (e) {
document.body.removeChild(input)
alert('当前浏览器不支持复制功能，请检查更新或更换其他浏览器操作')
}
}
}
所有问题均已解决。
总结
以上就是关于JavaScript复制内容到浏览器剪贴板报错：Cannot read properties of undefined (reading 'writeText')的解决方案的详细内容，更多关于JavaScript复制内容到浏览器剪贴板报错的资料请关注本站其它相关文章！
JavaScript怎么准确判断数据类型：typeof、instanceof与Object.prototype.toString
2026-11-05 17:09:21
JS中将数组和对象混合组装为JSON字符串
2026-11-05 16:41:42
JS运算符优先级与结合性的区别是什么？
2026-11-05 13:22:02
JS Map怎么只遍历Key或Value
2026-11-05 13:00:36
D3.js 与 ECharts 选型对比：灵活性 vs 开发效率
2026-11-05 09:45:01
相关标签：