到目前為止,Async Clipboard API 僅支援一組有限的 MIME 類型,可從系統剪貼簿複製及貼上,具體來說是 text/plain
、text/html
和 image/png
。瀏覽器通常會清除這類內容,例如從 HTML 字串中移除內嵌的 script
元素或 javascript:
連結,或是防止 PNG 解壓縮炸彈攻擊。
不過,在某些情況下,建議您支援剪貼簿中未經處理的內容:
- 應用程式自行處理清理作業的情況。
- 情境下,複製的資料必須與貼上的資料相同。
針對這類情況,Async Clipboard API 現已支援網頁自訂格式,可讓開發人員將任意資料寫入剪貼簿。
瀏覽器支援
從 Chromium 76 開始,系統支援具有圖片支援功能的 Async Clipboard API。網站自訂 自 起,電腦和行動裝置 Chromium 都支援 Async Clipboard API 格式 第 104 版。
將網路自訂格式寫入剪貼簿
將網路自訂格式寫入剪貼簿時幾乎與
編寫經過處理的標準化格式 (不適用規定除外)
在 blob 的 MIME 類型前面加上 "web "
字串 (包括結尾空格)。
// Fetch remote JPEG and GIF images and obtain their blob representations.
const [jpegBlob, gifBlob] = await Promise.all([
fetch('image.jpg').then((response) => response.blob()),
fetch('image.gif').then((response) => response.blob()),
]);
try {
// Write the image data to the clipboard, prepending the blobs' actual
// types (`"image/jpeg"` and "image/gif") with the string `"web "`, so
// they become `"web image/jpeg"` and `"web image/gif"` respectively.
// The code elegantly makes use of computed property names:
// https://developer.mozilla.org/docs/Web/JavaScript/Reference/Operators/Object_initializer#computed_property_names.
const clipboardItem = new ClipboardItem({
[`web ${jpegBlob.type}`]: jpegBlob,
[`web ${gifBlob.type}`]: gifBlob,
});
await navigator.clipboard.write([clipboardItem]);
} catch (err) {
console.error(err.name, err.message);
}
從剪貼簿讀取網路自訂格式
如同書寫一般,從剪貼簿讀取網頁自訂格式幾乎是
讀取經過消毒的格式。唯一的差別在於
現在應用程式需要尋找類型開頭為 "web "
的剪貼簿項目。
try {
// Iterate over all clipboard items.
const clipboardItems = await navigator.clipboard.read();
for (const clipboardItem of clipboardItems) {
for (const type of clipboardItem.types) {
// Discard any types that are not web custom formats.
if (!type.startsWith('web ')) {
continue;
}
const blob = await clipboardItem.getType(type);
// Sanitize the blob if you need to, then process it in your app.
}
}
} catch (err) {
console.error(err.name, err.message);
}
與平台專用應用程式的互通性
web image/jpeg
之類的網路自訂格式並不是一般的平台專用格式
應用程式能夠理解 (因為他們預期會預期 image/jpeg
)。長期下來,擔心應用程式
因為開發人員如果認為網站支援網站,預計支援這類格式,讓使用者選擇加入
打造符合使用者需求的自訂格式在作業系統剪貼簿中,系統會以多種格式呈現各種格式,以供使用,如下方 macOS 的螢幕截圖所示。
示範
您可以試試看下方的示範,並 查看原始碼,瞭解示範模式的運作方式。
特別銘謝
這篇文章已通過 Joe Medley 和 François Beaufort。 主頁橫幅:Neon Tommy,在 CC BY-SA 2.0 授權。