Angular中同域iFrame与父窗口通信：点击iframe内链接如何传值到父窗口

原方案失效原因 #

• 父页面直接在<iframe>标签上绑定click事件无法触发：iframe内部DOM的事件独立于父页面文档，事件不会跨文档冒泡
• iframe内部跳转时，iframe元素的src属性不会自动更新，仅初始化赋值时生效，因此直接读取src永远只能拿到初始值

实现方案 #

方案1：父页面直接监听iframe内部事件（同域专属，无需修改iframe站点代码） #

1. 调整模板代码

删除iframe上绑定的无效click事件，保留模板引用：

<iframe #kIframe class="iframek" sandbox="allow-same-origin allow-scripts allow-top-navigation" id="iframe_k" [src]='safeUrl' scrolling="auto" frameborder="0" allowfullscreen="true" wmode="transparent" name="kiframe"></iframe>

2. 组件逻辑代码

通过ViewChild获取iframe实例，监听iframe加载完成事件后操作内部DOM：

import { Component, ViewChild, ElementRef, AfterViewInit } from '@angular/core';
import { DomSanitizer } from '@angular/platform-browser';

@Component({
  // 你的组件配置
})
export class YourComponent implements AfterViewInit {
  @ViewChild('kIframe') kIframe!: ElementRef<HTMLIFrameElement>;
  safeUrl: any;

  constructor(private sanitizer: DomSanitizer) {
    // 你的safeUrl安全处理逻辑保留
  }

  ngAfterViewInit(): void {
    const iframe = this.kIframe.nativeElement;
    // 每次iframe加载完成（包括内部跳转）都会触发load事件
    iframe.addEventListener('load', () => {
      const iframeWin = iframe.contentWindow;
      const iframeDoc = iframeWin?.document;
      if (!iframeDoc || !iframeWin) return;

      // 方式1：监听所有链接点击，支持动态生成的链接（事件委托）
      iframeDoc.addEventListener('click', (e: Event) => {
        const target = e.target as HTMLElement;
        // 匹配点击的是a标签
        if (target.tagName.toLowerCase() === 'a') {
          const linkHref = (target as HTMLAnchorElement).href;
          // 此处为父页面拿到链接后的处理逻辑
          console.log('iframe内部点击的链接地址：', linkHref);
        }
      });

      // 方式2：直接获取iframe当前页面地址，无需监听点击
      const currentIframeUrl = iframeWin.location.href;
      console.log('iframe当前页面地址：', currentIframeUrl);
    });
  }
}

方案2：postMessage通信（兼容跨域场景，后续扩展性强） #

需要对iframe内嵌站点做少量修改：

1. iframe站点新增逻辑

给所有链接绑定点击事件，向父窗口发送消息：

// iframe内嵌站点的JS代码
document.addEventListener('click', (e) => {
  const target = e.target;
  if (target.tagName.toLowerCase() === 'a') {
    // 向父窗口发送消息，第二个参数建议替换为父窗口的具体域名提升安全性
    window.parent.postMessage({
      type: 'iframe_link_click',
      link: target.href
    }, window.location.origin);
  }
});

2. Angular父页面监听消息

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

@Component({
  // 你的组件配置
})
export class YourComponent implements OnInit, OnDestroy {
  private messageHandler: (e: MessageEvent) => void;

  ngOnInit(): void {
    this.messageHandler = (e: MessageEvent) => {
      // 校验消息来源，避免恶意消息
      if (e.origin !== window.location.origin) return;
      if (e.data?.type === 'iframe_link_click') {
        const clickedLink = e.data.link;
        // 此处为父页面拿到链接后的处理逻辑
        console.log('收到iframe传递的链接：', clickedLink);
      }
    };
    window.addEventListener('message', this.messageHandler);
  }

  ngOnDestroy(): void {
    // 组件销毁时移除事件监听，避免内存泄漏
    window.removeEventListener('message', this.messageHandler);
  }
}

注意事项 #

• 方案1仅适用于同域场景，跨域时直接访问contentWindow.document会触发权限报错
• 使用postMessage时必须校验e.origin，避免接收第三方恶意消息造成安全问题
• 如果iframe内部有前端路由跳转无刷新的场景，建议优先使用方案2，或者在方案1中额外监听iframe的popstate事件

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