iframe嵌入网页时内部复制按钮功能失效问题及解决方法

问题表现 #

• 网页单独打开时，页面内复制按钮功能可正常运行
• 通过iframe将该网页嵌套到另一个网页内部后，复制按钮功能失效
  基础嵌入代码格式：
  <iframe src="...">...</iframe>

相关代码 #

页面按钮代码：

<button onclick="copy()">copy</button>

对应复制功能JS逻辑：

function copy() {
  let copyText = document.getElementById("resu");
  
  copyText.select(); 
  copyText.setSelectionRange(0, 99999); /* 适配移动端设备 */

  navigator.clipboard.writeText(copyText.value.replace(/A  /, "A ")).then(function() {
    alert("Copied to clipboard.");
  }, function(err) {
    alert("Could not copy text.");
  });
}

故障原因 #

该问题由浏览器默认安全策略限制导致：navigator.clipboard 剪贴板读写API属于敏感权限接口，iframe作为嵌入的第三方上下文，默认不会被授予剪贴板操作权限，直接调用API会被浏览器直接拦截，触发复制失败的回调逻辑。

修复方案 #

给iframe标签添加allow属性，显式声明授予嵌入页剪贴板读写权限即可，配置代码如下：

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

该配置已验证可解决iframe嵌入场景下的复制功能失效问题。

内容的提问来源于stack exchange，提问作者Jnanesh