在浏览器中操作剪贴板进行复制粘贴我们有哪些方法呢，大家第一个想到的可能是document.execCommand，是的，但是为了防止用户的粘贴板敏感信息（如密码）被恶意js读取，chrome
等现代浏览器document.execCommand("paste")的操作来获取用户粘贴板数据，那么取而代之的是新的方法Clipboard API，今天让我们来比较一下两种方式来操作剪贴板。
一、document.execCommand复制粘贴板
一直以来我们对剪切板的操作代码可能是这样的，必须将复制的内容放在textarea中，然后必须可见，最后执行 document.execCommand('copy');完整代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<p>
<textarea id="textarea">Hello, world!</textarea>
</p>
<p>
<button id="copy">复制内容</button>
</p>
<script>
var selectAndCopy = function() {
// Select text
var cutTextarea = document.querySelector('#textarea');
cutTextarea.select();
// Execute copy
var successful = document.execCommand('copy');
var msg = successful ? 'successful': 'unsuccessful';
console.log('Cutting text command was ' + msg);
};
var copyButton = document.querySelector('#copy');
copyButton.addEventListener('click', function(event) {
selectAndCopy();
});
</script>
</body>
</html>
首先，它只能将选中的内容复制到剪贴板，无法向剪贴板任意写入内容。
其次，它是同步操作，如果复制/粘贴大量数据，页面会出现卡顿。有些浏览器还会跳出提示框，要求用户许可，这时在用户做出选择前，页面会失去响应。
为了解决这些问题，浏览器厂商提出了异步的 Clipboard API。
二、Clipboard API
Clipboard API 是下一代的剪贴板操作方法，比传统的document.execCommand()方法更强大、更合理。
通过检查功能是否navigator.clipboard存在，我们可以在通过功能检测支持该功能的浏览器中充分利用此API 。
if (navigator.clipboard) {
// Safe to use Async Clipboard API!
} else {
// Use document.execCommand() instead
}它的所有操作都是异步的，返回 Promise 对象，不会造成页面卡顿。而且，它可以将任意内容（比如图片）放入剪贴板。如果navigator.clipboard属性返回undefined，就说明当前浏览器不支持这个 API。
由于用户可能把敏感数据（比如密码）放在剪贴板，允许脚本任意读取会产生安全风险，所以这个 API 的安全限制比较多。
首先，Chrome 浏览器规定，只有 HTTPS 协议的页面才能使用这个 API。不过，开发环境（localhost）允许使用非加密协议。
其次，调用时需要明确获得用户的许可。权限的具体实现使用了 Permissions API，跟剪贴板相关的有两个权限：clipboard-write（写权限）和clipboard-read（读权限）。"写权限"自动授予脚本，而"读权限"必须用户明确同意给予。也就是说，写入剪贴板，脚本可以自动完成，但是读取剪贴板时，浏览器会弹出一个对话框，询问用户是否同意读取。
另外，需要注意的是，脚本读取的总是当前页面的剪贴板。这带来的一个问题是，如果把相关的代码粘贴到开发者工具中直接运行，可能会报错，因为这时的当前页面是开发者工具的窗口，而不是网页页面。
(async () => {
const text = await
navigator.clipboard.readText();
console.log(text);
})();
setTimeout(async () => {
const text = await
navigator.clipboard.readText();
console.log(text);
}, 2000);
三、Clipboard 对象方法事件
Clipboard 对象提供了四个方法，用来读写剪贴板。...
点击查看剩余70%
{{collectdata}}
网友评论0