gpt4 book ai didi

javascript - 跨浏览器的自定义 clipboardData 数据类型

转载 作者:行者123 更新时间:2023-11-29 20:59:08 25 4
gpt4 key购买 nike

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

用户将点击一个按钮,我们在 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/plaintext/html 设置的数据仍然可用。

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

我已经尝试查找有关这是否应该有效的信息,但找不到任何信息。浏览器之间是否完全支持自定义 clipboardData 数据类型,我做错了什么?或者它永远不会奏效?

application/json 数据类型做同样的事情在 Firefox 和 Electron 之间也不起作用。我们能够使用的唯一数据类型是 text/plaintext/html,但它们都已用于其他目的。

最佳答案

最后,我遍历了 clipboard W3C Working Draft 中列出的所有数据类型.此时,在 Firefox 和 Chrome 之间复制粘贴时,我只能让 text/plaintext/html 工作。

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

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>`);
}

我使用 btoa() 对 ID 进行 Base64 编码,以尽量减少与常规 HTML 粘贴的冲突。

关于javascript - 跨浏览器的自定义 clipboardData 数据类型,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47561981/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com