iframe内外部链接无法正常打开的技术求助

问题说明 #

使用Google Web Designer的gwd-iframe组件，通过JavaScript的srcdoc属性填充内部HTML内容，其中包含外部链接。遇到以下问题：

• 默认点击链接会在iframe内部打开，不符合跳转需求
• 给链接添加target="_blank"或target="_top"属性后，点击无任何反应
• 尝试通过JavaScript为链接绑定window.open(url, '_blank')事件监听器，无效
• 已为iframe添加sandbox参数allow-popups allow-popups-to-escape-sandbox，问题仍未解决

相关代码片段 #

初始iframe标签 #

<gwd-iframe id="gwd-iframe_1" source="" class="gwd-iframe-op97"></gwd-iframe>

填充iframe内容的JS函数 #

function iframeSrc() {
  const iframe = document.getElementById('gwd-iframe_1');
  iframe.srcdoc = iframeInner;
}

iframe内部HTML示例（含外部链接） #

<div style="color: black; font-size: 11px; font-family: Oswald, sans-serif; overflow-x: hidden; word-wrap: break-word; line-height: 1.4;">
  <p style="margin-top: 0 !important"> <span style="color: #8e5295"><strong>示例文本：Exercitation incididunt tempor.</strong></span><br> <strong>Dolore minim cupidatat.</strong> <br> </p>
  <p><strong>lorem</strong><br> ipsum<span>&#174;</span> Fugiat occaecat consequat labore anim incididunt irure adipisicing labore dolore veniam consequat occaecat nulla.<br> <span>&#8226;</span> Elit dolor veniam sed culpa quis est do dolore velit minim nulla.<br> <span>&#8226;</span> Anim ut in irure id cupidatat quis cupidatat eiusmod ex irure reprehenderit elit in ad.<sup>2</sup> </p>
  <p><strong>参考链接</strong> Veniam amet. <a href="https://stackoverflow.com/">https://stackoverflow.com/</a></p>
</div>

可行解决方案 #

方案1：主页面捕获iframe内的点击事件 #

由于gwd-iframe可能对内部DOM有特殊限制，直接操作内部元素无效。可以在主页面通过事件委托的捕获阶段监听点击，判断是否为外部链接并跳转：

document.addEventListener('click', function(e) {
  // 向上遍历找到点击的链接元素
  let target = e.target;
  while (target && target.tagName !== 'A') {
    target = target.parentNode;
  }
  // 判断是否为外部链接
  if (target && target.host !== window.location.host) {
    e.preventDefault(); // 阻止默认行为
    window.open(target.href, '_blank'); // 在新窗口打开
  }
}, true); // 开启捕获阶段，确保能获取到iframe内的事件

方案2：预处理srcdoc内容，添加跳转逻辑 #

在将HTML内容插入iframe前，先给所有链接添加点击事件，调用主页面的window.open：

function iframeSrc() {
  const iframe = document.getElementById('gwd-iframe_1');
  // 创建临时容器处理HTML内容
  const tempContainer = document.createElement('div');
  tempContainer.innerHTML = iframeInner;
  
  // 遍历所有链接，添加点击逻辑
  const links = tempContainer.querySelectorAll('a');
  links.forEach(link => {
    link.setAttribute('onclick', "window.parent.open(this.href, '_blank'); return false;");
  });
  
  // 将处理后的内容赋值给srcdoc
  iframe.srcdoc = tempContainer.innerHTML;
}

方案3：完善iframe的sandbox权限 #

gwd-iframe可能默认有额外的sandbox限制，需要确保sandbox属性包含必要权限，完整配置如下：

<gwd-iframe id="gwd-iframe_1" source="" class="gwd-iframe-op97" sandbox="allow-same-origin allow-popups allow-popups-to-escape-sandbox allow-scripts"></gwd-iframe>

说明：使用srcdoc时，allow-same-origin能让内部内容与主页面同源，确保脚本通信正常；allow-scripts允许内部执行点击事件脚本。

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