JS如何使用剪貼板操作Clipboard API
一、Document.execCommand() 方法
Document.execCommand()是操作剪貼板的傳統(tǒng)方法,各種瀏覽器都支持。
它支持復(fù)制、剪切和粘貼這三個(gè)操作。
- document.execCommand('copy')(復(fù)制)
- document.execCommand('cut')(剪切)
- document.execCommand('paste')(粘貼)
(1)復(fù)制操作
復(fù)制時(shí),先選中文本,然后調(diào)用document.execCommand('copy'),選中的文本就會進(jìn)入剪貼板。
const inputElement = document.querySelector('#input'); inputElement.select(); document.execCommand('copy');
上面示例中,腳本先選中輸入框inputElement里面的文字(inputElement.select()),然后document.execCommand('copy')將其復(fù)制到剪貼板。
注意,復(fù)制操作最好放在事件監(jiān)聽函數(shù)里面,由用戶觸發(fā)(比如用戶點(diǎn)擊按鈕)。如果腳本自主執(zhí)行,某些瀏覽器可能會報(bào)錯(cuò)。
(2)粘貼操作
粘貼時(shí),調(diào)用document.execCommand('paste'),就會將剪貼板里面的內(nèi)容,輸出到當(dāng)前的焦點(diǎn)元素中。
const pasteText = document.querySelector('#output'); pasteText.focus(); document.execCommand('paste');
(3)缺點(diǎn)
Document.execCommand()方法雖然方便,但是有一些缺點(diǎn)。
首先,它只能將選中的內(nèi)容復(fù)制到剪貼板,無法向剪貼板任意寫入內(nèi)容。
其次,它是同步操作,如果復(fù)制/粘貼大量數(shù)據(jù),頁面會出現(xiàn)卡頓。有些瀏覽器還會跳出提示框,要求用戶許可,這時(shí)在用戶做出選擇前,頁面會失去響應(yīng)。
為了解決這些問題,瀏覽器廠商提出了異步的 Clipboard API。
二、異步 Clipboard API
Clipboard API 是下一代的剪貼板操作方法,比傳統(tǒng)的document.execCommand()方法更強(qiáng)大、更合理。
它的所有操作都是異步的,返回 Promise 對象,不會造成頁面卡頓。而且,它可以將任意內(nèi)容(比如圖片)放入剪貼板。
navigator.clipboard屬性返回 Clipboard 對象,所有操作都通過這個(gè)對象進(jìn)行。
const clipboardObj = navigator.clipboard;
如果navigator.clipboard屬性返回undefined,就說明當(dāng)前瀏覽器不支持這個(gè) API。
由于用戶可能把敏感數(shù)據(jù)(比如密碼)放在剪貼板,允許腳本任意讀取會產(chǎn)生安全風(fēng)險(xiǎn),所以這個(gè) API 的安全限制比較多。
首先,Chrome 瀏覽器規(guī)定,只有 HTTPS 協(xié)議的頁面才能使用這個(gè) API。不過,開發(fā)環(huán)境(localhost)允許使用非加密協(xié)議。
其次,調(diào)用時(shí)需要明確獲得用戶的許可。權(quán)限的具體實(shí)現(xiàn)使用了 Permissions API,跟剪貼板相關(guān)的有兩個(gè)權(quán)限:clipboard-write(寫權(quán)限)和clipboard-read(讀權(quán)限)。"寫權(quán)限"自動授予腳本,而"讀權(quán)限"必須用戶明確同意給予。也就是說,寫入剪貼板,腳本可以自動完成,但是讀取剪貼板時(shí),瀏覽器會彈出一個(gè)對話框,詢問用戶是否同意讀取。
另外,需要注意的是,腳本讀取的總是當(dāng)前頁面的剪貼板。這帶來的一個(gè)問題是,如果把相關(guān)的代碼粘貼到開發(fā)者工具中直接運(yùn)行,可能會報(bào)錯(cuò),因?yàn)檫@時(shí)的當(dāng)前頁面是開發(fā)者工具的窗口,而不是網(wǎng)頁頁面。
(async () => { const text = await navigator.clipboard.readText(); console.log(text); })();
如果你把上面的代碼,粘貼到開發(fā)者工具里面運(yùn)行,就會報(bào)錯(cuò)。因?yàn)榇a運(yùn)行的時(shí)候,開發(fā)者工具窗口是當(dāng)前頁,這個(gè)頁面不存在 Clipboard API 依賴的 DOM 接口。一個(gè)解決方法就是,相關(guān)代碼放到setTimeout()里面延遲運(yùn)行,在調(diào)用函數(shù)之前快速點(diǎn)擊瀏覽器的頁面窗口,將其變成當(dāng)前頁。
setTimeout(async () => { const text = await navigator.clipboard.readText(); console.log(text); }, 2000);
上面代碼粘貼到開發(fā)者工具運(yùn)行后,快速點(diǎn)擊一下網(wǎng)頁的頁面窗口,使其變?yōu)楫?dāng)前頁,這樣就不會報(bào)錯(cuò)了。
三、Clipboard 對象
Clipboard 對象提供了四個(gè)方法,用來讀寫剪貼板。它們都是異步方法,返回 Promise 對象。
3.1 Clipboard.readText()
Clipboard.readText()方法用于復(fù)制剪貼板里面的文本數(shù)據(jù)。
document.body.addEventListener( 'click', async (e) => { const text = await navigator.clipboard.readText(); console.log(text); } )
上面示例中,用戶點(diǎn)擊頁面后,就會輸出剪貼板里面的文本。注意,瀏覽器這時(shí)會跳出一個(gè)對話框,詢問用戶是否同意腳本讀取剪貼板。
如果用戶不同意,腳本就會報(bào)錯(cuò)。這時(shí),可以使用try...catch結(jié)構(gòu),處理報(bào)錯(cuò)。
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); } }
3.2 Clipboard.read()
Clipboard.read()方法用于復(fù)制剪貼板里面的數(shù)據(jù),可以是文本數(shù)據(jù),也可以是二進(jìn)制數(shù)據(jù)(比如圖片)。該方法需要用戶明確給予許可。
該方法返回一個(gè) Promise 對象。一旦該對象的狀態(tài)變?yōu)?resolved,就可以獲得一個(gè)數(shù)組,每個(gè)數(shù)組成員都是 ClipboardItem 對象的實(shí)例。
async function getClipboardContents() { try { const clipboardItems = await navigator.clipboard.read(); for (const clipboardItem of clipboardItems) { for (const type of clipboardItem.types) { const blob = await clipboardItem.getType(type); console.log(URL.createObjectURL(blob)); } } } catch (err) { console.error(err.name, err.message); } }
ClipboardItem 對象表示一個(gè)單獨(dú)的剪貼項(xiàng),每個(gè)剪貼項(xiàng)都擁有ClipboardItem.types屬性和ClipboardItem.getType()方法。
ClipboardItem.types屬性返回一個(gè)數(shù)組,里面的成員是該剪貼項(xiàng)可用的 MIME 類型,比如某個(gè)剪貼項(xiàng)可以用 HTML 格式粘貼,也可以用純文本格式粘貼,那么它就有兩個(gè) MIME 類型(text/html和text/plain)。
ClipboardItem.getType(type)方法用于讀取剪貼項(xiàng)的數(shù)據(jù),返回一個(gè) Promise 對象。該方法接受剪貼項(xiàng)的 MIME 類型作為參數(shù),返回該類型的數(shù)據(jù),該參數(shù)是必需的,否則會報(bào)錯(cuò)。
3.3 Clipboard.writeText()
Clipboard.writeText()方法用于將文本內(nèi)容寫入剪貼板。
document.body.addEventListener( 'click', async (e) => { await navigator.clipboard.writeText('Yo') } )
上面示例是用戶在網(wǎng)頁點(diǎn)擊后,腳本向剪貼板寫入文本數(shù)據(jù)。
該方法不需要用戶許可,但是最好也放在try...catch里面防止報(bào)錯(cuò)。
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); } }
3.4 Clipboard.write()
Clipboard.write()方法用于將任意數(shù)據(jù)寫入剪貼板,可以是文本數(shù)據(jù),也可以是二進(jìn)制數(shù)據(jù)。
該方法接受一個(gè) ClipboardItem 實(shí)例作為參數(shù),表示寫入剪貼板的數(shù)據(jù)。
try { const imgURL = 'https://dummyimage.com/300.png'; const data = await fetch(imgURL); const blob = await data.blob(); await navigator.clipboard.write([ new ClipboardItem({ [blob.type]: blob }) ]); console.log('Image copied.'); } catch (err) { console.error(err.name, err.message); }
上面示例中,腳本向剪貼板寫入了一張圖片。注意,Chrome 瀏覽器目前只支持寫入 PNG 格式的圖片。
ClipboardItem()是瀏覽器原生提供的構(gòu)造函數(shù),用來生成ClipboardItem實(shí)例,它接受一個(gè)對象作為參數(shù),該對象的鍵名是數(shù)據(jù)的 MIME 類型,鍵值就是數(shù)據(jù)本身。
下面的例子是將同一個(gè)剪貼項(xiàng)的多種格式的值,寫入剪貼板,一種是文本數(shù)據(jù),另一種是二進(jìn)制數(shù)據(jù),供不同的場合粘貼使用。
function copy() { const image = await fetch('kitten.png'); const text = new Blob(['Cute sleeping kitten'], {type: 'text/plain'}); const item = new ClipboardItem({ 'text/plain': text, 'image/png': image }); await navigator.clipboard.write([item]); }
四、copy 事件,cut 事件
用戶向剪貼板放入數(shù)據(jù)時(shí),將觸發(fā)copy事件。
下面的示例是將用戶放入剪貼板的文本,轉(zhuǎn)為大寫。
const source = document.querySelector('.source'); source.addEventListener('copy', (event) => { const selection = document.getSelection(); event.clipboardData.setData('text/plain', selection.toString().toUpperCase()); event.preventDefault(); });
上面示例中,事件對象的clipboardData屬性包含了剪貼板數(shù)據(jù)。它是一個(gè)對象,有以下屬性和方法。
- Event.clipboardData.setData(type, data):修改剪貼板數(shù)據(jù),需要指定數(shù)據(jù)類型。
- Event.clipboardData.getData(type):獲取剪貼板數(shù)據(jù),需要指定數(shù)據(jù)類型。
- Event.clipboardData.clearData([type]):清除剪貼板數(shù)據(jù),可以指定數(shù)據(jù)類型。如果不指定類型,將清除所有類型的數(shù)據(jù)。
- Event.clipboardData.items:一個(gè)類似數(shù)組的對象,包含了所有剪貼項(xiàng),不過通常只有一個(gè)剪貼項(xiàng)。
下面的示例是攔截用戶的復(fù)制操作,將指定內(nèi)容放入剪貼板。
const clipboardItems = []; document.addEventListener('copy', async (e) => { e.preventDefault(); try { let clipboardItems = []; for (const item of e.clipboardData.items) { if (!item.type.startsWith('image/')) { continue; } clipboardItems.push( new ClipboardItem({ [item.type]: item, }) ); await navigator.clipboard.write(clipboardItems); console.log('Image copied.'); } } catch (err) { console.error(err.name, err.message); } });
上面示例中,先使用e.preventDefault()取消了剪貼板的默認(rèn)操作,然后由腳本接管復(fù)制操作。
cut事件則是在用戶進(jìn)行剪切操作時(shí)觸發(fā),它的處理跟copy事件完全一樣,也是從Event.clipboardData屬性拿到剪切的數(shù)據(jù)。
五、paste 事件
用戶使用剪貼板數(shù)據(jù),進(jìn)行粘貼操作時(shí),會觸發(fā)paste事件。
下面的示例是攔截粘貼操作,由腳本將剪貼板里面的數(shù)據(jù)取出來。
document.addEventListener('paste', async (e) => { e.preventDefault(); const text = await navigator.clipboard.readText(); console.log('Pasted text: ', text); });
以上就是JS如何使用剪貼板操作Clipboard API的詳細(xì)內(nèi)容,更多關(guān)于JS如何使用剪貼板操作的資料請關(guān)注腳本之家其它相關(guān)文章!
相關(guān)文章
js之input[type=file]選擇重復(fù)的文件,無法觸發(fā)change事件問題
這篇文章主要介紹了js之input[type=file]選擇重復(fù)的文件,無法觸發(fā)change事件問題,具有很好的參考價(jià)值,希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-05-05JavaScript的public、private和privileged模式
公共/私有變量和方法通過一個(gè)簡單的的例子,來展示如何使用JavaScript在類里面創(chuàng)建私有變量和方法2009-12-12IE view-source 無法查看看源碼 JavaScript看網(wǎng)頁源碼
查看網(wǎng)頁源代碼的方法其實(shí)有好幾種,最常用的我們就是在瀏覽器中直接選擇“查看網(wǎng)頁源代碼”就可以了,但是在有些時(shí)候這種方法卻不能見效,以下再介紹幾種簡單的方法供大家參考!2009-07-07JavaScript數(shù)組reduce()方法使用實(shí)例詳解
reduce是數(shù)組原型對象上的一個(gè)方法,可以幫助我們操作數(shù)組。本文將和大家分享4個(gè)關(guān)于JavaScript中數(shù)組reduce的用法,希望對大家有所幫助2022-07-07JavaScript實(shí)現(xiàn)左右滾動電影畫布
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)左右滾動電影畫布,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2020-02-02javascript window.open打開新窗口后無法再次打開該窗口問題的解決方法
這篇文章主要介紹了javascript window.open打開新窗口后無法再次打開該窗口問題的解決方法即無法再次打開窗口、第二次打開不了,需要的朋友可以參考下2014-04-04