JS调用prompt第二次执行报Document is not focused错误如何解决

该错误由浏览器剪贴板API的安全限制触发：

• navigator.clipboard 属于高敏感API，浏览器要求其调用必须发生在用户触发的短时交互上下文中，且调用时当前文档必须处于聚焦状态
• prompt 弹窗会主动夺走文档焦点，第一次调用时用户操作prompt后焦点会短暂落回文档，刚好满足调用要求；第二次执行时，异步操作上下文已经脱离了用户点击的触发链，prompt唤起后焦点状态无法满足剪贴板API的校验规则，就会抛出该DOMException

你可以通过调整异步逻辑结构+增加降级兼容的方式解决问题，修复后代码如下：

async function site() {
  const url = prompt();
  // 处理用户点击prompt取消的边界情况
  if (url === null) return
  const copyContent = 'The URL is ' + url;

  try {
    // 调用剪贴板前主动校验并恢复文档聚焦
    if (!document.hasFocus()) {
      window.focus();
    }
    await navigator.clipboard.writeText(copyContent);
  } catch (err) {
    // 新版剪贴板API调用失败时，降级为兼容复制方案，无聚焦限制
    const tempTextarea = document.createElement('textarea');
    tempTextarea.value = copyContent;
    document.body.appendChild(tempTextarea);
    tempTextarea.select();
    document.execCommand('copy');
    document.body.removeChild(tempTextarea);
  }
}

HTML代码无需修改。
核心修复逻辑：

• 将函数整体改为async结构，保证剪贴板操作和用户点击、prompt交互的上下文强关联，避免出现上下文脱离的问题
• 调用剪贴板API前主动检查文档聚焦状态，异常时主动唤起窗口聚焦
• 增加try/catch降级逻辑，当新版剪贴板API调用失败时，自动切换为兼容性更好的execCommand复制方案，不受聚焦规则限制

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