时间戳

首页 > 解决方案 > Javascript 剪贴板 API write() 在 Safari 中不起作用

javascript - Javascript 剪贴板 API write() 在 Safari 中不起作用

问题描述

我正在使用 javascript Clipboard API 将图像复制到剪贴板。尽管 Safari 的官方文档说它受支持，但它在 Chrome 和 Edge 中有效，但在 Safari 中无效。

检查文档：https ://webkit.org/blog/10855/

在这个例子中（不是我的真实代码）， write() 抛出一个错误：

document.getElementById("copy").addEventListener("click", async function() {
    const response = await fetch('https://upload.wikimedia.org/wikipedia/commons/4/47/PNG_transparency_demonstration_1.png');
    const blob = await response.blob();

    navigator.clipboard.write([new ClipboardItem({ "image/png": blob })])
      .then(function () { console.log('copied'); })
      .catch(function (error) { console.log(error); });
});

给定的错误是：

NotAllowedError：当前上下文中用户代理或平台不允许该请求，可能是因为用户拒绝了权限。

标签： javascriptimagesafaricopyclipboard

解决方案

这是因为您在调用之前调用了 await clipboard.write。苹果不允许这样做。你必须像这样直接传递你的承诺ClipboardItem：

document.getElementById("copy").addEventListener("click", async function() {
    const makeImagePromise = async () => {
        const response = await fetch('https://upload.wikimedia.org/wikipedia/commons/4/47/PNG_transparency_demonstration_1.png');
        return await response.blob();
    }

    navigator.clipboard.write([new ClipboardItem({ "image/png": makeImagePromise() })])
      .then(function () { console.log('copied'); })
      .catch(function (error) { console.log(error); });
});

推荐阅读