如何捕获iframe内发起的target=_blank跳转？

由于浏览器同源策略的限制，跨域场景下父页面无法直接访问iframe内部的DOM或JS上下文，因此实现需求的方式需要分情况讨论：

情况1：可修改iframe内部代码（或能协调第三方站点配合） #

这种情况下可以通过postMessage实现跨域通信，捕获跳转URL并阻止新标签页打开：

iframe内部代码 #

给所有带target="_blank"的锚点标签添加点击监听，阻止默认跳转行为后，将URL发送给父页面：

document.querySelectorAll('a[target="_blank"]').forEach(link => {
  link.addEventListener('click', (e) => {
    e.preventDefault();
    const targetUrl = link.href;
    // 建议将*替换为父页面的具体域名，提升安全性
    window.parent.postMessage({ type: 'blankLink', url: targetUrl }, '*');
  });
});

父页面（Angular实现） #

在父组件中监听message事件，接收iframe发送的URL并打印：

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-parent',
  template: '<iframe src="https://第三方域名.com"></iframe>'
})
export class ParentComponent implements OnInit {
  ngOnInit(): void {
    window.addEventListener('message', (event) => {
      // 验证消息来源域名，防止恶意消息
      if (event.origin !== 'https://第三方域名.com') return;
      
      if (event.data.type === 'blankLink') {
        console.log('iframe试图跳转的URL:', event.data.url);
      }
    });
  }
}

情况2：无法修改iframe内部代码（第三方站点） #

这种情况下受同源策略限制，无法直接捕获跳转URL，但可以通过以下方式间接处理：

方法A：使用代理页面 #

在自己的域名下部署一个代理页面，拉取第三方页面内容（需注意版权和跨域资源加载问题），然后在代理页面中拦截所有target="_blank"的链接：

// 代理页面代码
document.addEventListener('DOMContentLoaded', () => {
  document.querySelectorAll('a[target="_blank"]').forEach(link => {
    link.addEventListener('click', (e) => {
      e.preventDefault();
      console.log('试图跳转的URL:', link.href);
      // 也可通过postMessage将URL传给父页面
      window.parent.postMessage({ url: link.href }, '父页面域名');
    });
  });
});

父页面的iframe指向该代理页面即可：<iframe src="/proxy-page"></iframe>

方法B：限制iframe弹窗（无法获取URL） #

给iframe添加sandbox属性，阻止弹窗但无法获取具体跳转URL：

<iframe src="https://第三方域名.com" sandbox="allow-scripts allow-same-origin"></iframe>

该属性会阻止所有弹窗行为，但无法捕获跳转的具体URL，仅能实现阻止打开新标签的需求。

核心限制说明 #

跨域场景下，若没有iframe站点的配合或无法部署代理，无法直接捕获到iframe内部target="_blank"链接的跳转URL，这是浏览器同源安全策略的强制约束，没有绕过的合法方案。

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