iframe首次加载链接正常 后续点击链接跳转新标签页无法嵌入问题

问题复现代码 #

初始iframe代码：

<iframe name="eurosp" src="" width="100%" height="470px" marginheight="0" marginwidth="0" scrolling="no" frameborder="0" allow="fullscreen" allow="encrypted-media"></iframe>

配套跳转链接代码：

<p><a class="button-30" target="eurosp" href="link1">[ link 1 ]</a></p>
<p><a class="button-30" target="eurosp" href="link2">[ link 2 ]</a></p>
<p><a class="button-30" target="eurosp" href="link3">[ link 3 ]</a></p>

故障表现 #

• 首次点击任意链接，可正常在iframe内加载对应页面
• 首次加载完成后，再点击其他链接无法在iframe内切换内容，iframe固定显示首次加载的页面，后续点击的链接全部在新标签页打开
• 无论首次加载哪个链接，问题都稳定复现

问题成因 #

1. 核心原因：iframe加载的跨域页面内部执行了修改window.name的脚本，你最初给iframe设置的name="eurosp"浏览上下文标识被覆盖，浏览器无法匹配到对应name的iframe，就会按照默认规则把链接跳转到新标签页。这类第三方页面的脚本逻辑你无法从父页面修改，纯配置无法解决。
2. 代码本身存在不规范问题：iframe标签重复声明了两个allow属性，不符合HTML解析规则，部分浏览器会因此出现iframe上下文关联异常，提升问题出现的概率。

修复方案 #

第一步：修正基础代码不规范问题 #

先把重复的allow属性合并，同时给iframe加固定id方便后续脚本绑定，修正后代码如下：

<iframe name="eurosp" id="eurospFrame" src="" width="100%" height="470px" marginheight="0" marginwidth="0" scrolling="no" frameborder="0" allow="fullscreen; encrypted-media"></iframe>

第二步：加简易脚本绕开target匹配逻辑 #

直接用下面的原生JS脚本即可，不需要依赖任何第三方库，完全绕开name匹配的逻辑，从根源上解决问题：

document.addEventListener('DOMContentLoaded', () => {
  const frame = document.getElementById('eurospFrame');
  // 绑定所有跳转按钮的点击事件
  document.querySelectorAll('a.button-30').forEach(link => {
    link.addEventListener('click', e => {
      // 拦截默认跳转行为，避免打开新标签
      e.preventDefault();
      // 如果需要先清空iframe再加载，放开下面这行注释即可
      // frame.src = 'about:blank';
      // 手动给iframe设置目标地址，强制在内部加载
      frame.src = link.href;
    })
  })
})

脚本默认直接替换iframe的src地址加载新页面，如果确实需要在加载新链接前清空iframe内容，把代码里注释的那行放开即可。这个方案兼容所有主流浏览器，不会被iframe内部的跨域脚本影响。

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