Safari中异步获取文本后Navigator.clipboard复制失效如何解决

失效原因 #

Safari出于安全策略限制，所有剪贴板写入操作（包括document.execCommand('copy')和navigator.clipboard相关API）必须在用户交互触发的同步执行上下文中调用，经过setTimeout、网络请求等异步操作后，上下文会脱离用户交互的授权范围，就会被直接拦截。

可行解决方案 #

方案1：预请求复制内容（体验最优） #

提前预判用户的复制操作，比如在用户hover复制按钮时就提前发起API请求拉取要复制的内容，等用户点击按钮时，内容已经拉取完成，直接在同步上下文调用复制方法即可，完全避开异步场景问题。

方案2：使用ClipboardItem异步回填（标准方案） #

Safari 13.1及以上版本支持在navigator.clipboard.write中传入持有Promise的ClipboardItem，只需要在用户点击的同步上下文调用write方法拿到操作权限，异步获取内容后会自动回填到剪贴板：

// 封装异步复制方法
const asyncCopy = async (fetchContentPromise) => {
  try {
    await navigator.clipboard.write([
      new ClipboardItem({
        'text/plain': fetchContentPromise.then(content => {
          return new Blob([content], { type: 'text/plain' })
        })
      })
    ])
    console.log('复制成功')
  } catch (e) {
    console.error('复制失败', e)
    // 可降级到方案3
  }
}

// 点击事件中直接传入请求内容的Promise，不要await之后再调用
const handleCopyBtnClick = () => {
  // 直接把API请求的Promise传入，不需要提前await
  const contentPromise = fetch('/your/api/path').then(res => res.text())
  asyncCopy(contentPromise)
}

方案3：两步交互（兼容所有版本） #

如果需要兼容低版本Safari，可以采用两步交互的方式：

1. 用户第一次点击复制按钮时，发起API请求拉取内容，同时按钮文案变为「确认复制」
2. 请求成功后提示用户点击确认按钮，第二次点击的同步上下文直接执行复制操作，不会被Safari拦截。

注意事项 #

• document.execCommand已被Web标准废弃，建议优先使用navigator.clipboard系列API
• 所有剪贴板操作都要求页面处于HTTPS环境（本地localhost开发不受限制）
• 方案2的最低兼容版本为Safari 13.1、iOS Safari 13.4，低于该版本请降级到方案1或方案3

内容的提问来源于stack exchange，提问作者kishorekumaru