javascript iframe中的文本可以复制到剪贴板吗?

w3nuxt5m  于 2023-05-27  发布在  Java
关注(0)|答案(3)|浏览(253)

在我的React应用程序中,我在遍历数组后显示卡片(因此理论上可以有n卡片)。
我希望当用户单击某张卡片时,该卡片中显示的文本将被复制。然而,问题是react应用程序是在iframe中呈现的。
复制功能在应用程序位于单个选项卡中时有效。然而,当在iframe中尝试时,我遇到了这个错误:

Uncaught (in promise) DOMException: Disabled in this document by Feature Policy.

这与Google的this政策变更有关。有没有办法让这个功能发挥作用?
附加信息:在iframe中呈现的应用程序与父应用程序不共享同一个域
背景阅读链接:

hfwmuf9z

hfwmuf9z1#

正如这里提到的:
要在iframe中使用API,您需要使用Permissions Policy启用它,它定义了一种机制,允许选择性地启用和禁用各种浏览器功能和API。具体来说,您需要传递clipboard-readclipboard-write中的一个或两个,这取决于您的应用程序的需求。

<iframe src="index.html" allow="clipboard-read; clipboard-write"></iframe>

如果您只想将文本复制到剪贴板(即你 * 不 * 需要能够以编程方式 * 读取 * 剪贴板),那么你只需要clipboard-write权限:

<iframe src="index.html" allow="clipboard-write"></iframe>
9jyewag0

9jyewag02#

为了补充joe的答案,如果你需要允许剪贴板访问一个iframed站点,而不是父页面(特别是当子页面重定向到另一个源时),你需要在'allow'属性值中指定允许的源。例如,要允许对https://trustedsite.com/somefolder/index.html进行剪贴板读取访问,请用途:

<iframe src="index.html" allow="clipboard-read self https://trustedsite.com/somefolder/index.html"></iframe>

如果你嵌入了一个跨源URL,并且你没有在'allow'中提供可信域,你会在Chrome中看到以下错误:
由于应用于当前文档的权限策略,剪贴板API已被阻止。

0dxa2lsx

0dxa2lsx3#

由于应用于当前文档的权限策略,剪贴板API已被阻止。解决方案:

function copyToCustomCode() {
    let custom_code = document.querySelector("#custom_code").select();
    document.execCommand('copy'); 
    }
<textarea id="custom_code" placeholder="here is embed code" readonly="readonly">Copy Code Here</textarea>
 <button class="sh-btn" onclick="copyToCustomCode();">Copied</button>

相关问题