Chrome 66 新增异步剪贴板 API

在过去的几年里我们只能运用 document.execCommand 来操纵剪贴板。不过,这类操纵剪贴板的操纵是同步的,而且只能读取和写入 DOM。

如今 Chrome 66 已支撑了新的 Async Clipboard API,作为 execCommand 替代品。

这个新的 Async Clipboard API 还能够运用 Promise 来简化剪贴板事宜并将它们与 Drag-&-Drop API 一同运用。

演示视频:https://zhuanlan.zhihu.com/p/…

复制:将文本写入剪贴板

writeText() 能够把文本写入剪切板。writeText() 是异步的,它返回一个 Promise:

navigator.clipboard.writeText('要复制的文本')
  .then(() => {
    console.log('文本已胜利复制到剪切板');
  })
  .catch(err => {
    // This can happen if the user denies clipboard permissions:
    // 假如用户没有受权,则抛出非常
    console.error('没法复制此文本:', err);
  });

还能够运用异步函数asyncawait

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

粘贴:从剪贴板中读取文本

和复制一样,能够经由过程挪用 readText() 从剪贴板中读取文本,该函数也返回一个 Promise:

navigator.clipboard.readText()
  .then(text => {
    console.log('Pasted content: ', text);
  })
  .catch(err => {
    console.error('Failed to read clipboard contents: ', err);
  });

为了坚持一致性,下面是等效的异步函数:

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

处置惩罚粘贴事宜

有设计推出检测剪贴板变动的新事宜,但如今最好运用“粘贴”事宜。它很合适用于浏览剪贴板文本的新异步要领:

document.addEventListener('paste', event => {
  event.preventDefault();
  navigator.clipboard.readText().then(text => {
    console.log('Pasted text: ', text);
  });
});

平安和权限

剪贴板接见一向为浏览器带来平安问题。假如没有恰当的权限,页面能够会悄悄地将一切歹意内容复制到用户的剪贴板,粘贴时会发生灾难性的效果。设想一下,一个网页,静静地复制 rm -rf /解压缩炸弹图象到剪贴板。

让网页不受限定地读取剪贴板越发贫苦。用户经常将敏感信息(如暗码和个人详细信息)复制到剪贴板,然后能够经由过程任何页面浏览,而用户基础没法发觉。

与很多新的 API 一样,navigator.clipboard 仅支撑经由过程 HTTPS 供应的页面。为了防备滥用,只有当页面处于运动选项卡时才许可剪贴板接见。运动选项卡中的页面能够在不要求权限的情况下写入剪贴板,但从剪贴板中读取一直须要权限。

为了更轻易,复制和粘贴的两个新权限已添加到 Permissions API 中。当页面处于运动选项卡时,clipboard-write 权限会自动授与页面。当您经由过程从剪贴板中读取数据时,则必需要求猎取 clipboard-read 权限。

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

<img width=”405″ alt=”prompt” src=”https://user-images.githubuse…;>

与运用权限 API 的任何别的内容一样,能够搜检您的运用是不是具有与剪贴板交互的权限:

navigator.permissions.query({
  name: 'clipboard-read'
}).then(permissionStatus => {
  // permissionStatus.state 的值是 'granted'、'denied'、'prompt':
  console.log(permissionStatus.state);

  // 监听权限状况转变事宜
  permissionStatus.onchange = () => {
    console.log(permissionStatus.state);
  };
});

以下是剪贴板 API 的“异步”部份真正派上用场的处所:尝试读取或写入剪贴板数据将自动提醒用户取得权限(假如还没有授与)。由于 API 是基于 Promise 的,所以假如用户谢绝剪贴板权限时,Promise 将被 reject,因而页面能够恰当地作出相应。

由于只有当页面是当前运动选项卡时,Chrome 才许可剪贴板接见,因而假如直接粘贴到 DevTools 中,则会发明这里的一些示例运转不正确,由于此时 DevTools 自身是运动选项卡(页面不是运动选项卡)。有一个技能:我们须要运用 setTimeout 推延剪贴板接见,然后在挪用函数之前疾速单击页面内部以使页面猎取核心:

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

回忆

在引入异步剪贴板 API 之前,我们在 Web 浏览器中夹杂了差别的复制和粘贴完成。

在大多数浏览器中,能够运用 document.execCommand('copy') 和触发浏览器本身的复制和粘贴 document.execCommand('paste')。假如要复制的文本是不存在于 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 的浏览器中处置惩罚粘贴的内容:

document.addEventListener('paste', e => {
  const text = e.clipboardData.getData('text/plain');
  console.log('Got pasted text: ', text);
})

在 Internet Explorer 中,我们也能够经由过程 window.clipboardData 接见剪贴板。假如在用户手势内举行接见(比方点击事宜) – 以负责任的体式格局要求权限的一部份 – 则不显现权限提醒。

检测和回退

在支撑一切浏览器的同时,运用功用检测来应用异步剪贴板是个不错的主张。您能够经由过程搜检 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 的下一步是什么?

正如你能够已注意到的那样,这篇文章只涵盖了 navigator.clipboard 的文本部份。范例中有更多的通用 read()write() 要领,然则这些会带来分外的完成复杂性和平安性问题(请记着那些图象炸弹?)。现在,Chrome 正在推出更简朴的 API 文本部份。

更多信息

    原文作者:justjavac
    原文地址: https://segmentfault.com/a/1190000013826937
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞