浏览器

Question

我们正试图让我们的用户在两个系统之间复制粘贴数据。从网页到电子应用。

用户将在copy-to-clipboard的帮助下点击我们触发复制活动的按钮。

import copy from "copy-to-clipboard";

const copyHandler = (evt) => {
    evt.preventDefault();

    evt.clipboardData.setData("text/plain", url);
    evt.clipboardData.setData("mumbo/jumbo", JSON.stringify({
        foo: "bar"
    }));
}

document.addEventListener("copy", copyHandler);
copy();
document.removeEventListener("copy", copyHandler);

在Electron应用程序中，我们会听到粘贴事件：

onPaste = (evt) => {
    if(evt.clipboardData.getData("mumbo/jumbo")) {
        // Handle custom data-type
    } else if(evt.clipboardData.getData("text/html")) {
        // Handle html
    } else {
        // Handle plain text
    }
}

当用户在Chrome中使用我们的网页时，一切正常。我们可以读取自定义数据类型的数据。但是，当用户访问Firefox evt.clipboardData.getData("mumbo/jumbo")中的网页时，将返回undefined。我们为text/plain和text/html设置的数据仍然可用。

如果我们将数据粘贴回Firefox evt.clipboardData.getData("mumbo/jumbo")，则会正确返回我们设置的数据。

我试图找到有关这是否可行的信息，但无法找到任何信息。浏览器之间是否支持自定义clipboardData数据类型，我做错了什么？或者它永远不会起作用？

使用application/json数据类型执行相同的操作在Firefox和Electron之间也不起作用。我们能够使用的唯一数据类型是text/plain和text/html，但两者都已用于其他目的。

Answer 1

最后，我浏览了clipboard W3C Working Draft中列出的所有数据类型。此时，我只能在Firefox和Chrome之间进行复制粘贴时使用h1 { display:inline; } 和text/plain。

我最终使用text/html传递数据：

text/html

I Base64使用const copyHandler = (evt) => { evt.preventDefault(); evt.clipboardData.setData("text/plain", url); evt.clipboardData.setData("text/html", `<div id="${btoa("mumbo/jumbo")}" data-foo="${bar}"></div>`); } 对ID进行编码，以尽量减少与常规HTML粘贴的冲突。