TypeError: can't access property "writeText", navigator.clipboard is undefined

配图源自 Freepik

前言

在此前，我们会使用 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 提供服务
用于传送资源的网络信道的安全属性不能是废弃的

toFrankie / blog

TypeError: can't access property "writeText", navigator.clipboard is undefined #297

前言

问题

解决方法

更多

参考链接