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