如何在 JavaScript 中跨多個瀏覽器有效地將文字複製到剪貼簿？-js教程-PHP中文網

如何在 JavaScript 中跨多個瀏覽器有效地將文字複製到剪貼簿？

Linda Hamilton

發布： 2024-12-26 20:57:15

原創

162 人瀏覽過

How to Efficiently Copy Text to the Clipboard Across Multiple Browsers in 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中文網其他相關文章！