navigator.clipboard.writeText(...) 失败，document.execCommand(\'copy\') 工作不一致

Question

我有一个带有 iframe 的网页，主页上有一个 Copy 按钮，该按钮向 iframe 内的一个函数发送消息，旨在生成一个链接并将其放入剪贴板，但它不能始终如一地工作。 我正在使用 Chrome。

我尝试使用navigator.clipboard API，它总是失败并且e 未定义 - 没有给出 writeText 失败的原因

function copyText(text){
  if (navigator && navigator.clipboard && navigator.clipboard.writeText) {
    navigator.clipboard.writeText(text).then(
      () => console.log("Copied text OK"),
      (e) => console.log("Failed to copy text",e)
    );
  }
}

然后我在这里尝试了其他帖子的代码

 if (window.clipboardData && window.clipboardData.setData) {
    return window.clipboardData.setData('Text', text);
 }

以上内容在 Chrome 中无法运行，if 的计算结果为 false

另一种尝试，也来自 SO 中的另一个答案，是创建一个文本元素并复制其内容：

var tel = document.createElement('textarea');
tel.textContent = text;
document.body.appendChild(tel);
tel.select();

try {
    var isok = document.execCommand('copy');
    console.log("exec(copy) returned:", isok);
} catch (err) {
    console.log("exec(copy) failed", err);
}
finally {
    document.body.removeChild(tel);
}

上面的代码没有在控制台中显示“失败”消息，但也没有在剪贴板中设置值。在这些情况下，isok 是错误的。但是，如果我与页面交互 - 先单击其他内容 - 它确实有效。

我正在用一个静态的text 值测试这个，一个不会改变的链接，所以传递给函数的文本没有什么不同。该函数确实被调用，并通过调试器确认。

我错过了什么？

Answer 1

如果您的按钮位于 iframe 内，则除非已定义或加载到 iframe 文档中，否则它将无法访问复制功能的定义。

如果您在 main/top 文档中定义函数，您将能够在控制台中运行此函数，但您的按钮将无法从 iframe 内部访问该函数。