欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

解析Clipboard?API剪貼板操作實(shí)例

 更新時(shí)間:2022年09月06日 17:12:22   作者:jGjHwTzBzEwSdTb  
這篇文章主要為大家介紹了解析Clipboard?API剪貼板操作實(shí)例,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪

簡(jiǎn)介

瀏覽器允許 JavaScript 腳本讀寫剪貼板,自動(dòng)復(fù)制或粘貼內(nèi)容。

一般來(lái)說(shuō),腳本不應(yīng)該改動(dòng)用戶的剪貼板,以免不符合用戶的預(yù)期。但是,有些時(shí)候這樣做確實(shí)能夠帶來(lái)方便,比如“一鍵復(fù)制”功能,用戶點(diǎn)擊一下按鈕,指定的內(nèi)容就自動(dòng)進(jìn)入剪貼板。

目前,一共有三種方法可以實(shí)現(xiàn)剪貼板操作。

  • Document.execCommand()方法
  • 異步的 Clipboard API
  • copy事件和paste事件

本文逐一介紹這三種方法。

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'),選中的文本就會(huì)進(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í)行,某些瀏覽器可能會(huì)報(bào)錯(cuò)。

(2)粘貼操作

粘貼時(shí),調(diào)用document.execCommand('paste'),就會(huì)將剪貼板里面的內(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ù)制到剪貼板,無(wú)法向剪貼板任意寫入內(nèi)容。

其次,它是同步操作,如果復(fù)制/粘貼大量數(shù)據(jù),頁(yè)面會(huì)出現(xiàn)卡頓。有些瀏覽器還會(huì)跳出提示框,要求用戶許可,這時(shí)在用戶做出選擇前,頁(yè)面會(huì)失去響應(yīng)。

為了解決這些問題,瀏覽器廠商提出了異步的 Clipboard API。

異步 Clipboard API

Clipboard API 是下一代的剪貼板操作方法,比傳統(tǒng)的document.execCommand()方法更強(qiáng)大、更合理。

它的所有操作都是異步的,返回 Promise 對(duì)象,不會(huì)造成頁(yè)面卡頓。而且,它可以將任意內(nèi)容(比如圖片)放入剪貼板。

navigator.clipboard屬性返回 Clipboard 對(duì)象,所有操作都通過(guò)這個(gè)對(duì)象進(jìn)行。

const clipboardObj = navigator.clipboard;

如果navigator.clipboard屬性返回undefined,就說(shuō)明當(dāng)前瀏覽器不支持這個(gè) API。

由于用戶可能把敏感數(shù)據(jù)(比如密碼)放在剪貼板,允許腳本任意讀取會(huì)產(chǎn)生安全風(fēng)險(xiǎn),所以這個(gè) API 的安全限制比較多。

首先,Chrome 瀏覽器規(guī)定,只有 HTTPS 協(xié)議的頁(yè)面才能使用這個(gè) API。不過(guò),開發(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)限”自動(dòng)授予腳本,而“讀權(quán)限”必須用戶明確同意給予。也就是說(shuō),寫入剪貼板,腳本可以自動(dòng)完成,但是讀取剪貼板時(shí),瀏覽器會(huì)彈出一個(gè)對(duì)話框,詢問用戶是否同意讀取。

另外,需要注意的是,腳本讀取的總是當(dāng)前頁(yè)面的剪貼板。這帶來(lái)的一個(gè)問題是,如果把相關(guān)的代碼粘貼到開發(fā)者工具中直接運(yùn)行,可能會(huì)報(bào)錯(cuò),因?yàn)檫@時(shí)的當(dāng)前頁(yè)面是開發(fā)者工具的窗口,而不是網(wǎng)頁(yè)頁(yè)面。

(async () => {
  const text = await navigator.clipboard.readText();
  console.log(text);
})();

如果你把上面的代碼,粘貼到開發(fā)者工具里面運(yùn)行,就會(huì)報(bào)錯(cuò)。因?yàn)榇a運(yùn)行的時(shí)候,開發(fā)者工具窗口是當(dāng)前頁(yè),這個(gè)頁(yè)面不存在 Clipboard API 依賴的 DOM 接口。一個(gè)解決方法就是,相關(guān)代碼放到setTimeout()里面延遲運(yùn)行,在調(diào)用函數(shù)之前快速點(diǎn)擊瀏覽器的頁(yè)面窗口,將其變成當(dāng)前頁(yè)。

setTimeout(async () => {
  const text = await navigator.clipboard.readText();
  console.log(text);
}, 2000);

上面代碼粘貼到開發(fā)者工具運(yùn)行后,快速點(diǎn)擊一下網(wǎng)頁(yè)的頁(yè)面窗口,使其變?yōu)楫?dāng)前頁(yè),這樣就不會(huì)報(bào)錯(cuò)了。

Clipboard 對(duì)象

Clipboard 對(duì)象提供了四個(gè)方法,用來(lái)讀寫剪貼板。它們都是異步方法,返回 Promise 對(duì)象。

Clipboard.readText()

Clipboard.readText()方法用于復(fù)制剪貼板里面的文本數(shù)據(jù)。

document.body.addEventListener(
  'click',
  async (e) => {
    const text = await navigator.clipboard.readText();
    console.log(text);
  }
)

上面示例中,用戶點(diǎn)擊頁(yè)面后,就會(huì)輸出剪貼板里面的文本。注意,瀏覽器這時(shí)會(huì)跳出一個(gè)對(duì)話框,詢問用戶是否同意腳本讀取剪貼板。

如果用戶不同意,腳本就會(huì)報(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);
  }
}

Clipboard.read()

Clipboard.read()方法用于復(fù)制剪貼板里面的數(shù)據(jù),可以是文本數(shù)據(jù),也可以是二進(jìn)制數(shù)據(jù)(比如圖片)。該方法需要用戶明確給予許可。

該方法返回一個(gè) Promise 對(duì)象。一旦該對(duì)象的狀態(tài)變?yōu)?resolved,就可以獲得一個(gè)數(shù)組,每個(gè)數(shù)組成員都是 ClipboardItem 對(duì)象的實(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 對(duì)象表示一個(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/htmltext/plain)。

ClipboardItem.getType(type)方法用于讀取剪貼項(xiàng)的數(shù)據(jù),返回一個(gè) Promise 對(duì)象。該方法接受剪貼項(xiàng)的 MIME 類型作為參數(shù),返回該類型的數(shù)據(jù),該參數(shù)是必需的,否則會(huì)報(bào)錯(cuò)。

Clipboard.writeText()

Clipboard.writeText()方法用于將文本內(nèi)容寫入剪貼板。

document.body.addEventListener(
  'click',
  async (e) => {
    await navigator.clipboard.writeText('Yo')
  }
)

上面示例是用戶在網(wǎng)頁(yè)點(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);
  }
}

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ù),用來(lái)生成ClipboardItem實(shí)例,它接受一個(gè)對(duì)象作為參數(shù),該對(duì)象的鍵名是數(shù)據(jù)的 MIME 類型,鍵值就是數(shù)據(jù)本身。

下面的例子是將同一個(gè)剪貼項(xiàng)的多種格式的值,寫入剪貼板,一種是文本數(shù)據(jù),另一種是二進(jìn)制數(shù)據(jù),供不同的場(chǎng)合粘貼使用。

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]);
}

以上就是解析Clipboard API剪貼板操作實(shí)例的詳細(xì)內(nèi)容,更多關(guān)于Clipboard API 剪貼板的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章!

相關(guān)文章

最新評(píng)論