如何在 JavaScript 中跨多个浏览器高效地将文本复制到剪贴板？

在 JavaScript 中将文本复制到多个浏览器的剪贴板

概述：使用哪个 API？

要将文本复制到剪贴板，JavaScript 提供了三大浏览器API：

• 异步剪贴板 API (navigator.clipboard.writeText)：

  • 在 Chrome 66 中可用
  • 异步并且使用Promises
  • 可以写避免中断用户提示
  • 仅在 HTTPS 页面上支持

• document.execCommand('copy'):

  • 广泛支持浏览器
  • 同步，停止页面执行直到完成
  • 从 DOM 读取文本并将其放置在剪贴板上

• 覆盖副本事件：

  • 允许修改任何复制事件的剪贴板内容
  • 支持纯文本之外的多种数据格式
  • 此处未直接解决

总体发展注意

• 在控制台中测试代码时，剪贴板命令可能不起作用。
• 活动页面（对于异步剪贴板 API）或用户交互（对于 document.execCommand('copy')）通常需要。

异步回退方法

由于浏览器支持不同，建议使用后备方法。例如：

function fallbackCopyTextToClipboard(text) {
  // ...
}

function copyTextToClipboard(text) {
  if (!navigator.clipboard) fallbackCopyTextToClipboard(text);
  // ...
}

演示和结论

要测试代码并查看其实际效果，请访问此演示页面。请注意，由于 IFRAME 中的权限问题，嵌入的示例可能无法工作。

为了实现完全的跨浏览器兼容性，请在支持时使用异步剪贴板 API，否则回退到 document.execCommand('copy')。

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