如何在不同浏览器中可靠地将文本复制到 JavaScript 中的剪贴板？

在 JavaScript 中复制到剪贴板：多浏览器方法

将文本复制到剪贴板涉及利用各种浏览器 API。本文重点介绍三种主要方法：

1.异步剪贴板 API：[navigator.clipboard.writeText]
在 Chrome 66 中发布，异步剪贴板 API 提供对剪贴板的异步访问。它使用 Promises，确保用户提示不会中断 JavaScript 执行。此方法需要 HTTPS 并支持 Chrome 66 中的非活动选项卡。

2. document.execCommand('copy') （已弃用）
自 2015 年起在大多数浏览器中可用，此方法是同步的，会阻止 JavaScript 执行。它从 DOM 复制文本并将其放置在剪贴板上。部分浏览器在此过程中可能会显示权限提示。

3.覆盖复制事件
这种高级技术允许您根据复制事件修改剪贴板上显示的内容。这里不涉及它，因为它不直接解决复制到剪贴板的问题。

一般开发笔记

• 剪贴板操作通常需要页面处于活动状态或需要用户交互。
• 自 2020 年 2 月起，跨源 IFRAME 和 IFRAME 沙盒可能会导致示例代码无法在某些浏览器中运行。

异步回退方法

为了确保跨浏览器兼容性，请考虑使用异步回退方法对于旧版浏览器，到 document.execCommand('copy')：

function copyTextToClipboard(text) {
  if (!navigator.clipboard) {
    fallbackCopyTextToClipboard(text);
    return;
  }
  navigator.clipboard.writeText(text).then(() => {
    console.log('Async: Copying to clipboard was successful!');
  }, (err) => {
    console.error('Async: Could not copy text: ', err);
  });
}

以上是如何在不同浏览器中可靠地将文本复制到 JavaScript 中的剪贴板？的详细内容。更多信息请关注PHP中文网其他相关文章！