Chrome 76使用导航器将内容复制到剪贴板
我刚刚更新到Chrome 76稳定版,正在尝试使用新的剪贴板API将一些文本(以及后来的图像)复制到剪贴板。但是,navigator.clipboard.write(data)
似乎不起作用。以下是我的代码:
setInterval(function() {
console.log("Wriing to clipbard");
navigator.permissions.query({ name: 'clipboard-write' }).then(result => {
if (result.state === 'granted') {
var data = new Blob(["Text data"], {type : "text/plain"});
navigator.clipboard.write(data).then(function() {
console.log("Copied to clipboard successfully!");
}, function(error) {
console.error("unable to write to clipboard. Error:");
console.log(error);
});
} else {
console.log("clipboard-permissoin not granted: " + result);
}
});
}, 3000);
我在一个Chrome扩展内容脚本中运行,设置了剪贴板权限,因此权限确实被授予了。抛出的错误为:
unable to write to clipboard. Error:
TypeError: Failed to execute 'write' on 'Clipboard': Iterator getter is not callable.
非常奇怪的是,当我使用navigator.clipboard.write text(text)
而不是navigator.clipboard.write(data)
时,一切都运行得很好。问题是,我想使用write(data)
,因为稍后我还想将图像写入剪贴板。你知道为什么它不起作用吗?谢谢。
编辑:我从规格表中获取代码https://w3c.github.io/clipboard-apis/#dom-clipboard-write
更新:好的,我通过使用ClipboardItem(参见下面的答案)获得了文本复制功能,但如果我对dataURL编码的图像执行同样的操作,整个网页将崩溃并显示一条"Aw Snap"消息。所以不确定那里发生了什么。以下代码将使站点崩溃并强制重新加载:
setInterval(function() {
console.log("Wriing to clipbard");
navigator.permissions.query({ name: 'clipboard-write' }).then(result => {
if (result.state === 'granted') {
//var blob = new Blob(['hello'], {type: 'text/plain'});
var data = new Blob(["iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNk+P+/HgAFhAJ/wlseKgAAAABJRU5ErkJggg=="], {type : "image/png"});
var item = new ClipboardItem({'image/png': data});
navigator.clipboard.write([item]).then(function() {
console.log("Copied to clipboard successfully!");
}, function(error) {
console.error("unable to write to clipboard. Error:");
console.log(error);
});
} else {
console.log("clipboard-permissoin not granted: " + result);
}
});
}, 3000);
解决方案
好的,这就是适合我的解决方案。在调用WRITE()之前,您必须将BLOB包装在ClipboardItem对象中。我偶然发现了解决方案,阅读https://bugs.chromium.org/p/chromium/issues/detail?id=150835,然后在Web上搜索"ClipboardItem",然后找到这个代码https://github.com/web-platform-tests/wpt/blob/master/clipboard-apis/async-navigator-clipboard-basics.https.html。似乎还没有真正的文档来说明这一点,但嘿,它起作用了!
setInterval(function() {
console.log("Wriing to clipbard");
navigator.permissions.query({ name: 'clipboard-write' }).then(result => {
if (result.state === 'granted') {
var blob = new Blob(['hello'], {type: 'text/plain'});
var item = new ClipboardItem({'text/plain': blob});
navigator.clipboard.write([item]).then(function() {
console.log("Copied to clipboard successfully!");
}, function(error) {
console.error("unable to write to clipboard. Error:");
console.log(error);
});
} else {
console.log("clipboard-permissoin not granted: " + result);
}
});
}, 3000);
更新:好的,我也让图像复制起作用了(查看相同的源代码)。URL是图像的URL(Duh)
async function copyImage(url) {
console.log("Wriing to clipbard");
const response = await fetch(url);
const blob = await response.blob();
const item = new ClipboardItem({'image/png': blob});
await navigator.clipboard.write([item]).then(function() {
console.log("Copied to clipboard successfully!");
}, function(error) {
console.error("unable to write to clipboard. Error:");
console.log(error);
});
}
相关文章