“復制到剪貼板”是一個極為常見的web功能。多年來，我們一直依賴一個略顯“古老”的 API——document.execCommand('copy')。它曾是我們的得力助手，但現(xiàn)在，它已經(jīng)被正式標記為廢棄（Deprecated）。
document.execCommand 為何被時代拋棄？
在擁抱新事物之前，我們有必要了解舊事物的缺陷。execCommand 主要有三大“原罪”：
- 同步執(zhí)行：
execCommand 是一個同步操作。這意味著在執(zhí)行時，它會阻塞瀏覽器的主線程。如果處理的數(shù)據(jù)量很大或頁面復雜，可能會導致頁面瞬間卡頓，影響用戶體驗。 - 依賴 DOM：
execCommand 只能操作當前文檔中**被選中（selected）**的內(nèi)容。為了復制一段任意文本，我們不得不采取一些非?！昂诳汀钡氖侄危?/span> - 動態(tài)創(chuàng)建一個隱藏的
<textarea> 或 <input> 元素。 - 將想要復制的文本放入這個元素。
- 用 JavaScript 選中該元素的全部內(nèi)容。
- 調(diào)用
document.execCommand('copy')。 - 最后，移除這個臨時創(chuàng)建的元素。
這一套流程繁瑣、不直觀，且容易出錯。
- 權限模型不清晰：它對剪貼板的訪問權限控制非常模糊，不同瀏覽器的實現(xiàn)和限制也存在差異，這帶來了一定的安全隱患。
正是因為這些原因，W3C 決定將其廢棄，并推出了一個為現(xiàn)代 Web 量身定做的解決方案。
新的主角：強大的 Clipboard API (navigator.clipboard)
Clipboard API 是一個異步的、基于 Promise 的現(xiàn)代接口，它徹底改變了我們與剪貼板交互的方式。
它的核心優(yōu)勢在于：
- 異步操作：所有操作都返回 Promise，不會阻塞主線程，對性能友好。
- 安全可靠：它整合了瀏覽器的權限系統(tǒng)（Permissions API）。在讀取剪貼板內(nèi)容時，需要明確獲得用戶的授權，并且大多數(shù)操作要求頁面在**安全上下文（HTTPS）**下運行。
- 不依賴 DOM：你可以直接將字符串、圖片等數(shù)據(jù)寫入剪貼板，無需任何 DOM 元素作為中介。
- 功能更強大：除了純文本，它還支持寫入和讀取更豐富的數(shù)據(jù)類型，例如圖片。
實戰(zhàn)演練：如何使用 Clipboard API
讓我們來看幾個最常見的場景。
場景一：復制文本到剪貼板
這是最基礎的需求。使用 navigator.clipboard.writeText()，一切都變得異常簡單。
HTML:
<input id="copy-input" type="text" value="這是要被復制的文本">
<button id="copy-btn">復制文本</button>
JavaScript:
看，代碼干凈利落！我們不再需要任何隱藏的 <textarea>。async/await 和 try...catch 的組合完美地處理了異步流程和可能出現(xiàn)的錯誤（例如用戶拒絕授權）。
場景二：從剪貼板讀取文本
讀取操作比寫入更敏感，因此瀏覽器會向用戶請求權限。注意： 出于安全考慮，readText() 和 read() 方法通常只能在用戶主動交互（如點擊事件）的回調(diào)中調(diào)用。
HTML:
<button id="paste-btn">粘貼內(nèi)容</button>
<div id="paste-area" style="border: 1px solid #ccc; padding: 10px; min-height: 50px;"></div>
JavaScript:
場景三：更進一步，復制圖片
這是 execCommand 無法直接做到的。Clipboard API 通過 write() 方法和 ClipboardItem 對象，讓復制非文本數(shù)據(jù)成為可能。
async function copyImageToClipboard(imageUrl) {
try {
// 1. 獲取圖片數(shù)據(jù)
const response = await fetch(imageUrl);
const blob = await response.blob(); // 將圖片轉(zhuǎn)換為 Blob 對象
// 2. 創(chuàng)建一個 ClipboardItem
const item = new ClipboardItem({
[blob.type]: blob
});
// 3. 寫入剪貼板
await navigator.clipboard.write([item]);
console.log('圖片已復制到剪貼板');
} catch (err) {
console.error('復制圖片失敗: ', err);
}
}
// 使用示例
// copyImageToClipboard('path/to/your/image.png');
截至目前，所有主流現(xiàn)代瀏覽器（Chrome, Firefox, Edge, Safari）都已支持 Clipboard API 的核心功能。
閱讀原文：原文鏈接
該文章在 2025/6/23 14:20:15 編輯過
400 186 1886
