如何在Angular组件中检测iframe内嵌表单的内容变更

适用于需要在Angular父组件中监听iframe内嵌页面表单内容变更的场景，示例场景如下：

本方案同时支持仅检测首次变更和持续检测所有变更两种需求。

实现前提 #

必须满足浏览器同源策略要求：如果iframe加载的是跨域资源，无法直接操作iframe内部DOM，需要配合子页面的postMessage通信实现。

实现步骤 #

1. 组件模板 #

你现有模板已经配置了iframe的模板引用，无需额外调整，代码如下：

<div class="wrapper">
    <iframe #iframe [src]="iframe.source">
</div>

2. 组件逻辑实现 #

完整的TS代码如下，可根据需求切换首次/持续检测模式：

import { Component, ViewChild, ElementRef, AfterViewInit, OnDestroy } from '@angular/core';

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html',
  styleUrls: ['./your-component.component.css']
})
export class YourComponent implements AfterViewInit, OnDestroy {
  // 获取iframe的模板引用
  @ViewChild('iframe') iframeRef!: ElementRef<HTMLIFrameElement>;
  // 首次变更标记位，仅首次检测需求需要
  private isFirstChange = true;

  ngAfterViewInit(): void {
    const iframe = this.iframeRef.nativeElement;
    // 等待iframe完全加载后再绑定监听事件
    iframe.addEventListener('load', () => {
      const iframeDoc = iframe.contentDocument || iframe.contentWindow?.document;
      // 无法获取iframe文档对象时直接返回，通常是跨域导致
      if (!iframeDoc) return;

      // 选中iframe内所有可输入的表单元素，可根据实际需求筛选范围
      const allFormControls = iframeDoc.querySelectorAll('input, select, textarea, [contenteditable="true"]');

      allFormControls.forEach(control => {
        // 持续检测模式用这个写法
        control.addEventListener('input', this.onFormContentChange.bind(this));
        // 仅需要首次检测的话替换成下面的写法，事件触发一次后自动解绑
        // control.addEventListener('input', this.onFormContentChange.bind(this), { once: true });
      });
    })
  }

  private onFormContentChange(event: Event): void {
    // 仅首次检测的逻辑，不需要持续检测可以保留
    if (!this.isFirstChange) return;
    this.isFirstChange = false;
    // 此处写首次变更后的业务逻辑
    console.log('表单发生了首次变更', event.target);

    // 持续检测模式下删掉上面的标记位判断即可，每次表单内容变更都会触发以下逻辑
    // console.log('表单内容更新', event.target);
  }

  ngOnDestroy(): void {
    // 组件销毁时清理事件监听，避免内存泄漏
    const iframe = this.iframeRef?.nativeElement;
    const iframeDoc = iframe?.contentDocument || iframe?.contentWindow?.document;
    if (!iframeDoc) return;
    const allFormControls = iframeDoc.querySelectorAll('input, select, textarea, [contenteditable="true"]');
    allFormControls.forEach(control => {
      control.removeEventListener('input', this.onFormContentChange.bind(this));
    });
  }
}

提示：如果iframe内的表单是异步动态渲染的，建议用事件委托的方式绑定监听，不需要逐个给元素绑事件，写法如下：

// 把事件绑定到iframe的document上，所有后代元素的input事件都会冒泡触发
iframeDoc.addEventListener('input', (e) => {
  // 可以判断触发事件的元素是不是表单元素
  if (['INPUT', 'SELECT', 'TEXTAREA'].includes((e.target as HTMLElement).tagName)) {
    this.onFormContentChange(e);
  }
})

跨域场景适配 #

如果iframe加载的是跨域页面，需要在iframe对应的子页面中自行监听表单变更，通过postMessage方法向父页面发送变更通知，Angular父页面监听全局的message事件接收通知即可。

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