Javascript 对非“文本/普通”内容的新剪贴板API访问

使用新的API，我可以轻松地将当前内容读出为text（），API看起来可以支持多种“类型”，但至少在Chrome和Edge中，它总是只返回

text/plain

。这是新API中的错误/限制，还是我应该以不同的方式进行调用

如何触发此行为的完整示例 注意：请确保事先复制富文本内容。（这不是一个片段，因为新的剪贴板API在iFrame中似乎不起作用）

粘贴到该区域以获取旧api
异步api

document.querySelector（“#async”）.addEventListener（“单击”，（e）=>{
navigator.permissions
.query（{name:“剪贴板读取”}）
。然后（（结果）=>{
//是否授予读取剪贴板的权限，或者用户是否愿意
//如果提示允许，我们将继续。
if（result.state==“已授予”| | result.state==“提示”）{
navigator.clipboard.read（）。然后（（数据）=>{
console.log（data.map（（d）=>d.types））；//始终仅返回[['text/plain']]
});
}
});
});
document.querySelector（“div”）.addEventListener（“粘贴”，（e）=>{
console.log（e.clipboardData.types）；//返回相同内容[“text/plain”、“text/html”]
});

因为如果剪贴板不是文本，readText（）和read（）返回一个空字符串，所以此代码是安全的

资料来源：

由于如果剪贴板不是文本，readText（）（以及read（））将返回空字符串，因此此代码是安全的

资料来源：

---

Chrome仍在使用它：

目前，只能通过此API检索和写入

text/plain

和

image/png

不幸的是，他们还阻止了对跨源帧的访问，这意味着几乎所有在线js提琴，包括堆栈片段

因此，不确定这些东西能持续多久，下面是该沙箱的主要代码：

  button.onclick = async (evt) => {
    const clipboard = navigator.clipboard;
    const item = (await clipboard.read())[0];
    const image =
      item.types.includes("image/png") && (await item.getType("image/png"));
    const text =
      item.types.includes("text/plain") && item.getType("text/plain");

    if (image) {
      document.body.appendChild(new Image()).src = URL.createObjectURL(
        image
      );
    }
    console.log(text);
  };

---

请注意，通过ClipboardEvent的

clipboardData

访问的同步API可以访问这些类型。

Chrome仍在使用它：

目前，只能通过此API检索和写入

text/plain

和

image/png

不幸的是，他们还阻止了对跨源帧的访问，这意味着几乎所有在线js提琴，包括堆栈片段

因此，不确定这些东西能持续多久，下面是该沙箱的主要代码：

  button.onclick = async (evt) => {
    const clipboard = navigator.clipboard;
    const item = (await clipboard.read())[0];
    const image =
      item.types.includes("image/png") && (await item.getType("image/png"));
    const text =
      item.types.includes("text/plain") && item.getType("text/plain");

    if (image) {
      document.body.appendChild(new Image()).src = URL.createObjectURL(
        image
      );
    }
    console.log(text);
  };

请注意，通过ClipboardEvent的

clipboardData

访问的同步API可以访问这些类型