如何通过JavaScript使iframe内的所有链接均在iframe中打开？

嘿，这个问题我刚好处理过，完全可以用JavaScript实现，但得先区分两种场景——同域和跨域，毕竟浏览器的同源策略可是个硬限制：

这种情况最省心，因为父页面的JS可以直接访问iframe内部的DOM结构。我们只需要等iframe加载完成后，遍历所有链接，强制它们在当前iframe内打开即可：

// 先给你的iframe加个ID，比如"my-iframe"
const myIframe = document.getElementById('my-iframe');

// 监听iframe的加载完成事件，避免DOM还没渲染就操作
myIframe.addEventListener('load', function() {
  // 获取iframe内部的文档对象
  const iframeDoc = this.contentDocument || this.contentWindow.document;
  // 选中所有<a>标签
  const allLinks = iframeDoc.querySelectorAll('a');
  
  allLinks.forEach(link => {
    // 方案1：直接修改target属性为_self，覆盖原有的_blank设置
    link.target = '_self';
    
    // 方案2（更稳妥，应对JS触发的跳转）：监听点击事件，阻止默认跳转后手动在iframe内打开
    link.addEventListener('click', function(e) {
      e.preventDefault();
      iframeDoc.location.href = this.href;
    });
  });
});

这样不管原链接有没有设置target="_blank"，都会乖乖在当前iframe里打开。

这里要泼个冷水：由于浏览器的同源策略，父页面的JS根本碰不到iframe里的DOM元素，所以上面的方法直接失效。这时候得换思路：

• 如果你能联系到iframe内容的开发者，让他们把页面里的链接统一改成target="_self"或者去掉target属性，这是最根本的解决办法；
• 要是没法修改iframe内容，只能尝试和iframe页面通过postMessage通信，但前提是iframe的代码要配合接收消息并处理跳转（对方得写对应的监听逻辑，不然白搭）；
• 还有个偏门方法：自己搭一个同域的代理页面，把跨域页面的内容拉取过来（注意要处理CORS和版权问题），在代理页面里把所有链接改成内部跳转，再把这个代理页面嵌入iframe——但这种方式风险不小，谨慎使用。

总的来说，同域场景轻松解决，跨域就得看有没有权限或者对方的配合啦。

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