这几年我们只能通过document.execCommand来操作剪贴板。但是，这种对剪贴板的操作是同步的，并且只读取和写入DOM。Chrome66现在支持新的AsyncClipboardAPI作为execCommand的替代品。这个新的异步剪贴板API还可以使用Promises来简化剪贴板事件，并将它们与拖放API一起使用。演示视频：https://zhuanlan.zhihu.com/p/...复制：写入剪贴板writeText()可以将文本写入剪贴板。writeText()是异步的，它返回一个Promise：navigator.clipboard.writeText('Texttocopy').then(()=>{console.log('Texthasbeensuccessfullycopyedtotheclipboard');})。catch(err=>{//如果用户拒绝剪贴板权限，就会发生这种情况：//如果用户没有权限，则会抛出异常console.error('Cannotcopythistext:',err);});您也可以使用async和await作为异步函数：asyncfunctioncopyPageUrl(){try{awaitnavigator.clipboard.writeText(location.href);console.log('页面URL已复制到剪贴板');}赶上（错误）{控制台。error('复制失败：',err);}}粘贴：从剪贴板读取文本与复制相同。您可以通过调用readText()来读取剪贴板中的文本，它也会返回一个Promise:navigator。clipboard.readText().then(text=>{console.log('Pastedcontent:',text);}).catch(err=>{console.error('读取剪贴板内容失败：',err);});为了保持一致性，这里是等效的异步函数：asyncfunctiongetClipboardContents(){try{consttext=awaitnavigator.clipboard.readText();console.log('粘贴内容：',text);}catch(err){console.error('读取客户端失败pboard内容：'，错误）；}}处理粘贴事件计划引入新事件来检测剪贴板更改，但目前最好使用“粘贴”事件，它非常适合读取剪贴板文本的新异步方法：document.addEventListener('paste',event=>{event.preventDefault();navigator.clipboard.readText().then(text=>{console.log('Pastedtext:',text);});});安全和权限剪贴板访问一直是浏览器的安全问题。如果没有适当的权限，该页面可能会悄悄地将所有恶意内容复制到用户的剪贴板，粘贴时会造成灾难性的后果。想象一个网页默默地复制rm-rf/或将炸弹图像解包到剪贴板。让网页无限制读取剪贴板比较麻烦。用户经常将密码和个人详细信息等敏感信息复制到剪贴板，然后可以在用户不注意的情况下通过任何页面读取这些信息。与许多新API一样，navigator.clipboard仅支持通过HTTPS提供的页面。为防止滥用，仅当页面位于活动选项卡中时才允许访问剪贴板。活动选项卡中的页面无需请求许可即可写入剪贴板，但从剪贴板读取始终需要许可。为方便起见，权限API中添加了两个用于复制和粘贴的新权限。当页面是活动选项卡时，剪贴板写入权限会自动授予页面。当您从剪贴板读取数据时，您必须请求剪贴板读取权限。{name:'clipboard-read'}{name:'clipboard-write'}获得许可LikeAPI中的任何其他内容，您可以检查您的应用是否有权与剪贴板交互：navigator.permissions.query({name:'clipboard-read'}).then(permissionStatus=>{//ofpermissionStatus.stateValues分别是'granted','denied','prompt':console.log(permissionStatus.state);//监听权限状态变化事件permissionStatus.onchange=()=>{console.log(permissionStatus.state);};});这是剪贴板API的“异步”部分真正派上用场的地方：尝试读取或写入剪贴板数据将自动提示用户许可（如果尚未授予）。由于API是基于Promise的，如果当用户拒绝剪贴板权限时，Promise将被拒绝以便页面可以适当响应。因为Chrome仅在页面为当前活动选项卡时才允许剪贴板访问，因此如果直接粘贴到DevTools中，您会发现这个的一些中的示例无法正确运行，因为此时DevTools本身是活动选项卡（页面不是）。有一个技巧：我们需要通过setTimeout延迟剪贴板访问，然后在页面内部快速点击，然后调用函数使页面获得焦点：setTimeout(async()=>{consttext=awaitnavigator.clipboard.readText();console.log(文本);},2000);不同复制和粘贴实现的混合。在大多数浏览器中，您可以使用document.execCommand('copy')和document.execCommand('paste')触发浏览器自己的复制和粘贴。如果要复制的文本是DOM中不存在的字符串，我们必须将其插入到DOM中并选择它：button.addEventListener('click',e=>{constinput=document.createElement('input');document.body.appendChild(input);input.value=text;input.focus();input.select();constresult=document.execCommand('copy');if(result==='unsuccessful'){console.error('Failedtocopytext.');}})同样，这里是在不支持新的异步剪贴板API的浏览器中处理粘贴内容的方式：document.addEventListener('paste',e=>{consttext=e.clipboardData.getData('text/plain');console.log('Gotpastedtext:',text);})在IE中，我们也可以通过window.clipboardData访问剪贴板。如果访问是在用户手势（例如点击事件）内进行的——以负责任的方式请求权限的一部分——则不会显示权限提示。检测和回退在支持所有浏览器的同时，使用特征检测来利用异步剪贴板是个好主意。您可以通过检查navigator.clipboard来检测对异步剪贴板API的支持：{text=e.clipboardData.getData('text/plain');}console.log('Gotpastedtext:',text);});异步剪贴板API的下一步是什么？您可能已经注意到，本文仅涵盖navigator.clipboard的文本部分。规范中有更多通用的read()和write()方法，但这些方法引入了额外的实现复杂性和安全问题（还记得那些图像炸弹吗？）。Chrome目前正在推出一个更简单的API文本部分。更多信息ChromePlatformStatusCodeExampleAPIExplanationImplementationDiscussion
