JavaScript異步剪貼板API的應(yīng)用

這期內(nèi)容當(dāng)中小編將會(huì)給大家?guī)碛嘘P(guān)JavaScript異步剪貼板API的應(yīng)用，以專業(yè)的角度為大家分析和敘述，閱讀完這篇文章希望大家可以有所收獲。

在過去的幾年里我們只能使用 document.execCommand 來操作剪貼板。不過，這種操作剪貼板的操作是同步的，并且只能讀取和寫入 DOM。

現(xiàn)在 Chrome 66 已經(jīng)支持了新的 Async Clipboard API，作為 execCommand 替代品。

這個(gè)新的 Async Clipboard API 還可以使用 Promise 來簡化剪貼板事件并將它們與 Drag-&-Drop API 一起使用。

復(fù)制：將文本寫入剪貼板

writeText() 可以把文本寫入剪切板。writeText() 是異步的，它返回一個(gè) 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ù)也返回一個(gè) 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);
  }
}

處理粘貼事件

有計(jì)劃推出檢測剪貼板更改的新事件，但現(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)限，頁面可能會(huì)悄悄地將所有惡意內(nèi)容復(fù)制到用戶的剪貼板，粘貼時(shí)會(huì)產(chǎn)生災(zāi)難性的結(jié)果。想象一下，一個(gè)網(wǎng)頁，靜靜地復(fù)制 rm -rf / 或解壓縮炸彈圖像到剪貼板。

讓網(wǎng)頁不受限制地讀取剪貼板更加麻煩。用戶經(jīng)常將敏感信息（如密碼和個(gè)人詳細(xì)信息）復(fù)制到剪貼板，然后可以通過任何頁面閱讀，而用戶根本無法察覺。

與許多新的 API 一樣，navigator.clipboard 僅支持通過 HTTPS 提供的頁面。為了防止濫用，只有當(dāng)頁面處于活動(dòng)選項(xiàng)卡時(shí)才允許剪貼板訪問?；顒?dòng)選項(xiàng)卡中的頁面可以在不請求權(quán)限的情況下寫入剪貼板，但從剪貼板中讀取始終需要權(quán)限。

為了更容易，復(fù)制和粘貼的兩個(gè)新權(quán)限已添加到 Permissions API 中。當(dāng)頁面處于活動(dòng)選項(xiàng)卡時(shí)，clipboard-write 權(quán)限會(huì)自動(dòng)授予頁面。當(dāng)您通過從剪貼板中讀取數(shù)據(jù)時(shí)，則必須要求獲取 clipboard-read 權(quán)限。

{ name: 'clipboard-read' }
{ name: 'clipboard-write' }

與使用權(quán)限 API 的任何其它內(nèi)容一樣，可以檢查您的應(yīng)用是否具有與剪貼板交互的權(quán)限：

navigator.permissions.query({
  name: 'clipboard-read'
}).then(permissionStatus => {
  // 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ù)將自動(dòng)提示用戶獲得權(quán)限（如果尚未授予）。由于 API 是基于 Promise 的，所以如果用戶拒絕剪貼板權(quán)限時(shí)，Promise 將被 reject，因此頁面可以適當(dāng)?shù)刈鞒鲰憫?yīng)。

因?yàn)橹挥挟?dāng)頁面是當(dāng)前活動(dòng)選項(xiàng)卡時(shí)，Chrome 才允許剪貼板訪問，因此如果直接粘貼到 DevTools 中，則會(huì)發(fā)現(xiàn)這里的一些示例運(yùn)行不正確，因?yàn)榇藭r(shí) DevTools 本身是活動(dòng)選項(xiàng)卡（頁面不是活動(dòng)選項(xiàng)卡）。有一個(gè)技巧：我們需要使用 setTimeout 推遲剪貼板訪問，然后在調(diào)用函數(shù)之前快速單擊頁面內(nèi)部以使頁面獲取焦點(diǎn)：

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

回顧

在引入異步剪貼板 API 之前，我們在 Web 瀏覽器中混合了不同的復(fù)制和粘貼實(shí)現(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)容：

出自：https://github.com/justjavac/the-front-end-knowledge-you-may-not-know/issues/23

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)行訪問（例如點(diǎn)擊事件） – 以負(fù)責(zé)任的方式請求權(quán)限的一部分 – 則不顯示權(quán)限提示。

檢測和回退

在支持所有瀏覽器的同時(shí)，使用功能檢測來利用異步剪貼板是個(gè)不錯(cuò)的主意。您可以通過檢查 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);
});

正如你可能已經(jīng)注意到的那樣，這篇文章只涵蓋了 navigator.clipboard 的文本部分。規(guī)范中有更多的通用 read() 和 write() 方法，但是這些會(huì)帶來額外的實(shí)現(xiàn)復(fù)雜性和安全性問題（請記住那些圖像炸彈？）。目前，Chrome 正在推出更簡單的 API 文本部分。

以上便是JavaScript異步剪貼板API的應(yīng)用，雖然從篇幅上看很復(fù)雜，但是示例代碼非常詳細(xì)且容易理解，如果想了解更多相關(guān)內(nèi)容，請關(guān)注億速云行業(yè)資訊。