如何强制iFrame内的链接在新标签页打开？

嘿，我来帮你搞定这个iframe里链接跳转的问题～你现在遇到的情况是，iframe里的链接默认在iframe内部打开，而你加在iframe标签上的target="_blank"其实是没用的——这个属性是用来指定iframe自身作为链接目标时的打开方式，管不到iframe内部的链接哦。

下面分两种场景给你解决方案：

场景1：iframe加载的是你自己的同域页面 #

这种情况你完全有控制权，两种方法任选：

• 直接给内部页面的所有链接加target="_blank"：

  <a href="/your-internal-page" target="_blank">你的内部页面</a>
  

• 用JavaScript批量设置，省得一个个改：
  如果是在内部页面里加代码：

  document.addEventListener('DOMContentLoaded', () => {
    document.querySelectorAll('a').forEach(link => {
      link.setAttribute('target', '_blank');
    });
  });
  

  如果要在父页面操作，得等iframe加载完成：

  const myIframe = document.querySelector('iframe');
  myIframe.addEventListener('load', () => {
    myIframe.contentDocument.querySelectorAll('a').forEach(link => {
      link.setAttribute('target', '_blank');
    });
  });
  

场景2：iframe加载的是跨域页面（比如你例子里的谷歌搜索） #

这里因为浏览器的同源策略限制，你没法直接用JS修改iframe内部的DOM，不过可以通过设置iframe的sandbox属性来实现：

修改你的iframe代码成这样：

<iframe 
  src="https://www.google.com/search?q=google+speed+test&amp;rlz=1C1OKWM_iwIL860IL860&amp;oq=google&amp;aqs=chrome.0.69i59j69i57j69i60l3j69i65l3.1015j0j7&amp;sourceid=chrome&amp;ie=UTF-8" 
  loading="lazy"
  sandbox="allow-same-origin allow-scripts allow-popups allow-top-navigation-by-user-activation"
></iframe>

这里的sandbox属性加了几个关键权限：

• allow-popups：允许iframe内部打开新标签页/窗口
• allow-top-navigation-by-user-activation：允许用户触发的导航跳出iframe（辅助作用）
• allow-same-origin和allow-scripts：保证iframe里的页面能正常加载和运行脚本

⚠️ 注意：像谷歌这类大型网站，本身可能设置了X-Frame-Options禁止被iframe嵌入，可能会导致你的iframe直接加载失败，这个是网站自身的限制，没法绕过哦。

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