資訊專欄INFORMATION COLUMN
摘要：它很適合用于閱讀剪貼板文本的新異步方法安全和權(quán)限剪貼板訪問一直為瀏覽器帶來安全問題。讓網(wǎng)頁不受限制地讀取剪貼板更加麻煩。為了防止濫用，只有當(dāng)頁面處于活動選項卡時才允許剪貼板訪問。
在過去的幾年里我們只能使用 document.execCommand 來操作剪貼板。不過，這種操作剪貼板的操作是同步的，并且只能讀取和寫入 DOM。
現(xiàn)在 Chrome 66 已經(jīng)支持了新的 Async Clipboard API，作為 execCommand 替代品。
這個新的 Async Clipboard API 還可以使用 Promise 來簡化剪貼板事件并將它們與 Drag-&-Drop API 一起使用。
演示視頻：https://zhuanlan.zhihu.com/p/...
復(fù)制：將文本寫入剪貼板writeText() 可以把文本寫入剪切板。writeText() 是異步的，它返回一個 Promise：
navigator.clipboard.writeText("要復(fù)制的文本")
.then(() => {
console.log("文本已經(jīng)成功復(fù)制到剪切板");
})
.catch(err => {
// This can happen if the user denies clipboard permissions:
// 如果用戶沒有授權(quán)，則拋出異常
console.error("無法復(fù)制此文本：", err);
});
還可以使用異步函數(shù) 的 async 和 await：
async function copyPageUrl() {
try {
await navigator.clipboard.writeText(location.href);
console.log("Page URL copied to clipboard");
} catch (err) {
console.error("Failed to copy: ", err);
}
}
粘貼：從剪貼板中讀取文本
和復(fù)制一樣，可以通過調(diào)用 readText() 從剪貼板中讀取文本，該函數(shù)也返回一個 Promise：
navigator.clipboard.readText()
.then(text => {
console.log("Pasted content: ", text);
})
.catch(err => {
console.error("Failed to read clipboard contents: ", err);
});
為了保持一致性，下面是等效的異步函數(shù)：
async function getClipboardContents() {
try {
const text = await navigator.clipboard.readText();
console.log("Pasted content: ", text);
} catch (err) {
console.error("Failed to read clipboard contents: ", err);
}
}
處理粘貼事件
有計劃推出檢測剪貼板更改的新事件，但現(xiàn)在最好使用“粘貼”事件。它很適合用于閱讀剪貼板文本的新異步方法：
document.addEventListener("paste", event => {
event.preventDefault();
navigator.clipboard.readText().then(text => {
console.log("Pasted text: ", text);
});
});
安全和權(quán)限
剪貼板訪問一直為瀏覽器帶來安全問題。如果沒有適當(dāng)?shù)臋?quán)限，頁面可能會悄悄地將所有惡意內(nèi)容復(fù)制到用戶的剪貼板，粘貼時會產(chǎn)生災(zāi)難性的結(jié)果。想象一下，一個網(wǎng)頁，靜靜地復(fù)制 rm -rf / 或解壓縮炸彈圖像到剪貼板。
讓網(wǎng)頁不受限制地讀取剪貼板更加麻煩。用戶經(jīng)常將敏感信息（如密碼和個人詳細(xì)信息）復(fù)制到剪貼板，然后可以通過任何頁面閱讀，而用戶根本無法察覺。
與許多新的 API 一樣，navigator.clipboard 僅支持通過 HTTPS 提供的頁面。為了防止濫用，只有當(dāng)頁面處于活動選項卡時才允許剪貼板訪問。活動選項卡中的頁面可以在不請求權(quán)限的情況下寫入剪貼板，但從剪貼板中讀取始終需要權(quán)限。
為了更容易，復(fù)制和粘貼的兩個新權(quán)限已添加到 Permissions API 中。當(dāng)頁面處于活動選項卡時，clipboard-write 權(quán)限會自動授予頁面。當(dāng)您通過從剪貼板中讀取數(shù)據(jù)時，則必須要求獲取 clipboard-read 權(quán)限。
{ name: "clipboard-read" }
{ name: "clipboard-write" }
{
// permissionStatus.state 的值是 "granted"、"denied"、"prompt":
console.log(permissionStatus.state);
// 監(jiān)聽權(quán)限狀態(tài)改變事件
permissionStatus.onchange = () => {
console.log(permissionStatus.state);
};
});
以下是剪貼板 API 的“異步”部分真正派上用場的地方：嘗試讀取或?qū)懭爰糍N板數(shù)據(jù)將自動提示用戶獲得權(quán)限（如果尚未授予）。由于 API 是基于 Promise 的，所以如果用戶拒絕剪貼板權(quán)限時，Promise 將被 reject，因此頁面可以適當(dāng)?shù)刈鞒鲰憫?yīng)。
因為只有當(dāng)頁面是當(dāng)前活動選項卡時，Chrome 才允許剪貼板訪問，因此如果直接粘貼到 DevTools 中，則會發(fā)現(xiàn)這里的一些示例運(yùn)行不正確，因為此時 DevTools 本身是活動選項卡（頁面不是活動選項卡）。有一個技巧：我們需要使用 setTimeout 推遲剪貼板訪問，然后在調(diào)用函數(shù)之前快速單擊頁面內(nèi)部以使頁面獲取焦點：
setTimeout(async () => {
const text = await navigator.clipboard.readText();
console.log(text);
}, 2000);
回顧
在引入異步剪貼板 API 之前，我們在 Web 瀏覽器中混合了不同的復(fù)制和粘貼實現(xiàn)。
在大多數(shù)瀏覽器中，可以使用 document.execCommand("copy") 和觸發(fā)瀏覽器自己的復(fù)制和粘貼 document.execCommand("paste")。如果要復(fù)制的文本是不存在于 DOM 中的字符串，我們必須將其插入到 DOM 中并選擇它：
button.addEventListener("click", e => {
const input = document.createElement("input");
document.body.appendChild(input);
input.value = text;
input.focus();
input.select();
const result = document.execCommand("copy");
if (result === "unsuccessful") {
console.error("Failed to copy text.");
}
})
同樣，以下是您如何在不支持新的 Async Clipboard API 的瀏覽器中處理粘貼的內(nèi)容：
document.addEventListener("paste", e => {
const text = e.clipboardData.getData("text/plain");
console.log("Got pasted text: ", text);
})
在 Internet Explorer 中，我們也可以通過 window.clipboardData 訪問剪貼板。如果在用戶手勢內(nèi)進(jìn)行訪問（例如點擊事件） - 以負(fù)責(zé)任的方式請求權(quán)限的一部分 - 則不顯示權(quán)限提示。
檢測和回退在支持所有瀏覽器的同時，使用功能檢測來利用異步剪貼板是個不錯的主意。您可以通過檢查 navigator.clipboard 來檢測對 Async Clipboard API 的支持：
document.addEventListener("paste", async e => {
let text;
if (navigator.clipboard) {
text = await navigator.clipboard.readText()
}
else {
text = e.clipboardData.getData("text/plain");
}
console.log("Got pasted text: ", text);
});
異步剪貼板 API 的下一步是什么？
正如你可能已經(jīng)注意到的那樣，這篇文章只涵蓋了 navigator.clipboard 的文本部分。規(guī)范中有更多的通用 read() 和 write() 方法，但是這些會帶來額外的實現(xiàn)復(fù)雜性和安全性問題（請記住那些圖像炸彈？）。目前，Chrome 正在推出更簡單的 API 文本部分。
更多信息Chrome 平臺狀態(tài)
代碼示例
API
解釋
實施方案
討論
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/93492.html
摘要：它很適合用于閱讀剪貼板文本的新異步方法安全和權(quán)限剪貼板訪問一直為瀏覽器帶來安全問題。讓網(wǎng)頁不受限制地讀取剪貼板更加麻煩。為了防止濫用，只有當(dāng)頁面處于活動選項卡時才允許剪貼板訪問。 在過去的幾年里我們只能使用 document.execCommand 來操作剪貼板。不過，這種操作剪貼板的操作是同步的，并且只能讀取和寫入 DOM。 現(xiàn)在 Chrome 66 已經(jīng)支持了新的 Async Cl...
摘要：在中，針對屬性的一個子集實現(xiàn)了類型對象模型，這些屬于的一部分。返回一個對象，該對象指定每個受限制屬性的值或值范圍。例如，這會在導(dǎo)航請求期間發(fā)生。按照規(guī)范，已被刪除。 原文鏈接：Chrome 66 Beta: CSS Typed Object Model, Async Clipboard API, AudioWorklet 除非另有說明，否則下文所述的更改適用于 Android，Ch...
摘要：在中，針對屬性的一個子集實現(xiàn)了類型對象模型，這些屬于的一部分。返回一個對象，該對象指定每個受限制屬性的值或值范圍。例如，這會在導(dǎo)航請求期間發(fā)生。按照規(guī)范，已被刪除。 原文鏈接：Chrome 66 Beta: CSS Typed Object Model, Async Clipboard API, AudioWorklet 除非另有說明，否則下文所述的更改適用于 Android，Ch...
摘要：發(fā)布一直是數(shù)據(jù)可視化的不錯選擇。本次發(fā)布的版本的更新包括使用代替回調(diào)函數(shù)，等高線圖和密度圖。詳情發(fā)布該版本更新包括模塊調(diào)整，模塊新增函數(shù)判斷終端是否支持顏色，棄用函數(shù)和等。 01. D3.js 5.0 發(fā)布 D3 一直是 JavaScript 數(shù)據(jù)可視化的不錯選擇。本次發(fā)布的 5.0 版本的更新包括：使用 Promise 代替回調(diào)函數(shù)，等高線圖和密度圖。 詳情：https://gith...
摘要：發(fā)布一直是數(shù)據(jù)可視化的不錯選擇。本次發(fā)布的版本的更新包括使用代替回調(diào)函數(shù)，等高線圖和密度圖。詳情發(fā)布該版本更新包括模塊調(diào)整，模塊新增函數(shù)判斷終端是否支持顏色，棄用函數(shù)和等。 01. D3.js 5.0 發(fā)布 D3 一直是 JavaScript 數(shù)據(jù)可視化的不錯選擇。本次發(fā)布的 5.0 版本的更新包括：使用 Promise 代替回調(diào)函數(shù)，等高線圖和密度圖。 詳情：https://gith...
閱讀 1302·2021-11-15 18:14
閱讀 3223·2021-08-25 09:38
閱讀 2699·2019-08-30 10:55
閱讀 2734·2019-08-29 16:39
閱讀 1339·2019-08-29 15:07
閱讀 2474·2019-08-29 14:14
閱讀 842·2019-08-29 12:36
閱讀 944·2019-08-29 11:21
