解决 TypeError: can't access property "writeText", navigator.clipboard is undefined
前言
在此前，我们会使用 document.execCommand('copy') 和 document.execCommand('paste') 来实现复杂和粘贴的功能。但它们是同步的，在处理大量文本或者图像解码等耗时较大的情况下，它会阻塞页面。
后来，WHATWG 带来了异步的 Clipboard API，如果用户授予了相应的权限，它就能提供系统剪贴板的读写访问能力，常用于实现剪切、复制和粘贴功能。
它们都暴露于 navigator.clipboard 属性上：
navigator.clipboard.write()navigator.clipboard.writeText()navigator.clipboard.read()navigator.clipboard.readText()
均返回 Promise 对象。其中 writeText() 只是通用 write() 方法的一种便捷方法，read() 与 readText() 同理。
其兼容性如下：
问题
这里有一个最简单的示例，利用 navigator.clipboard.writeText() 复制一段文本。
<!DOCTYPE html>
<html lang="en">
<body>
<button>Copy</button>
<script>
const btn = document.querySelector('button')
btn.addEventListener('click', copy)
function copy() {
navigator.clipboard.writeText(new Date())
}
</script>
</body>
</html>
当我们启用一个本地服务，发现点击复制是不成功的，报错如下：
TypeError: can't access property "writeText", navigator.clipboard is undefined
TypeError: Cannot read properties of undefined (reading 'writeText')
由于
与许多新 API 一样，Clipboard API 仅支持通过 HTTPS 提供的页面。为帮助防止滥用，仅当页面是活动选项卡时才允许访问剪贴板。活动选项卡中的页面无需请求许可即可写入剪贴板，但从剪贴板读取始终需要许可。
Clipboard API 的复制与粘贴能力对应 Permissions API 的 clipboard-write 和 clipboard-read 权限。
通过以下示例，我们可以发现：
const queryOpts = { name: 'clipboard-write', allowWithoutGesture: false }
const permissionStatus = await navigator.permissions.query(queryOpts)
console.log(permissionStatus.state) // Will be 'granted', 'denied' or 'prompt'
permissionStatus.state 返回结果是 denied，也就是该权限被设为「拒绝」状态，自然就无法实现复制的目的了。
其实是浏览器的一种安全策略，当页面不安全的时候，全局属性 navigator.clipboard 是不存在的，也就是 undefined，所以就出现前面的问题了。
解决方法
在域名安全的情况下，比如 HTTPS、localhost、127.0.0.1，是可以访问到 navigator.clipboard 对象的。
由于生产环境上几乎都是 HTTPS 了，所以主要面向本地调试的场景，我们可以把类似 http://172.10.3.24:3000 改成 http://localhost:3000 来解决复制问题。
更多
其实 window 对象上有一个属性 isSecureContext 可用于判断当前域名是否安全。
if (window.isSecureContext) {
// 页面在安全上下文中，所以 Clipboard API 可用
// do something...
}
许多 Web API 仅能在安全上下文（Secure contexts）中访问。
本地传递的资源，如那些带有 http://127.0.0.1、http://localhost 和 http://*.localhost 网址（如 http://dev.whatever.localhost/）和 file:// 网址的资源也是认为经过安全传递的。
非本地资源要被认为是安全的，必须满足以下标准：
- 必须通过
https://或wss://URL 提供服务 - 用于传送资源的网络信道的安全属性不能是废弃的
参考链接
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论