复制到剪贴板后打开新窗口，如何解决焦点丢失异常？

你遇到的Uncaught (in promise) DOMException: Document is not focused.错误，根源在于剪贴板写入是异步操作，之前的代码在剪贴板操作未完成时就执行了window.open()，导致原页面失去焦点，触发了浏览器对剪贴板操作的权限限制（剪贴板操作要求页面处于激活焦点状态）。

正确解决方案：用async/await确保剪贴板操作完成后再打开窗口 #

将copyToClipboard函数改为异步函数，通过await等待剪贴板写入操作完成，之后再执行打开新窗口的逻辑，就能避免焦点丢失的问题。

修改后的完整代码如下：

HTML代码

<body>
<button type="button" onclick="copyToClipboard()">Copy</button>
<div id="template">
  Test
</div>
</body>

JavaScript代码

async function copyToClipboard(){
    try {
      const htmlCode = template.innerHTML;
      const blobInput = new Blob([htmlCode], { type: 'text/html' })
      // 等待剪贴板写入完成
      await navigator.clipboard.write([new ClipboardItem({ 'text/html': blobInput })])
      alert('Copied')

      var win = window.open('https://mail.google.com/mail/', '_blank');
      if (win) {
          win.focus();
      } else {
          alert('Please allow popups for this website');
      }
    } catch (e) {
      alert(e)
    }
};

补充：你之前.then()写法的错误 #

你尝试的.then()写法无效，是因为直接把window.open()的执行结果传给了.then()，而非传递一个回调函数。正确的.then()写法应为：

navigator.clipboard.write([new ClipboardItem({ 'text/html': blobInput })])
  .then(() => {
    window.open('https://mail.google.com/mail/', '_blank');
  });

不过async/await的写法更简洁直观，可读性更高。

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