剪贴板操作必须由**用户交互（如点击）**直接触发。

• 陷阱：你可能想在 AI 接口返回结果后“自动帮用户复制”。

• 逻辑：fetch().then(() => navigator.clipboard.write(...))

• 结局：失败。因为在 then 回调执行时，浏览器认为最初的点击事件已经结束，当前的执行栈已经失去了“用户手势”的加持。

• Safari 特供坑：Safari 极其严格。如果你在点击后执行了过于复杂的逻辑（超过 1 秒才去调用剪贴板 API），它也会认为手势失效。

4. 权限陷阱排查表

5. “防爆”代码模版

 作为资深开发，我们不玩赌博。我们要写一个高鲁棒性的复制函数，自动处理权限和降级。

async function safeCopy(text) {
  // 1. 尝试使用现代 API
  if (navigator.clipboard && window.isSecureContext) {
    try {
      await navigator.clipboard.writeText(text);
      return true;
    } catch (err) {
      console.warn("现代 API 写入失败，尝试降级", err);
    }
  }


  // 2. 降级到传统 textarea 方案 (兼容 HTTP 和某些 Iframe)
  const textArea = document.createElement("textarea");
  textArea.value = text;
  
  // 隐藏元素，但不能用 display: none（否则无法 focus）
  textArea.style.position = "fixed";
  textArea.style.left = "-9999px";
  textArea.style.top = "0";
  document.body.appendChild(textArea);
  
  textArea.focus();
  textArea.select();
  
  try {
    const successful = document.execCommand('copy');
    document.body.removeChild(textArea);
    return successful;
  } catch (err) {
    document.body.removeChild(textArea);
    return false;
  }
}

6. 进阶提示：主动查询权限

如果你想在用户点击前就知道“复制按钮”是否能用，可以使用 Permissions API：

const queryClipboardPermission = async () => {
  try {
    const result = await navigator.permissions.query({ name: "clipboard-write" });
    if (result.state === "granted" || result.state === "prompt") {
      // 权限可用
    }
  } catch (e) {
    // 某些浏览器不支持查询此权限
  }
};

参考文章：原文链接​