如何使用childView访问iframe并提取其内部的表单元素？

现有代码的问题 #

• 错误使用innerHTML属性：this.iframe.nativeElement.innerHTML拿到的是iframe标签自身的HTML字符串，不是iframe加载的内部文档对象，字符串类型没有getElementsByClassName这类DOM查询方法，直接调用会抛出类型错误。
• 未监听iframe加载状态：如果在iframe内部页面未完全加载的情况下执行查询，即使获取到了文档对象也无法拿到目标表单元素。
• 未做跨域兼容：如果iframe加载的地址与父页面不满足同源策略（同协议、同域名、同端口），浏览器会禁止访问iframe内部DOM，直接操作会抛出跨域错误。

正确实现方式 #

第一步：修改模板，添加iframe加载监听 #

<iframe style="width:100%;height:1000px;background-color: white;" [src]="generateUrl()" #iframe (load)="onIframeLoad()">
</iframe>

第二步：修改业务代码，正确获取内部文档对象 #

@ViewChild('iframe', {static: false}) iframe: ElementRef;
// 标记iframe是否加载完成
private isIframeLoaded = false;

// iframe加载完成后自动触发
onIframeLoad() {
  this.isIframeLoaded = true;
}

collectData() {
  // 前置状态校验
  if (!this.isIframeLoaded || !this.iframe?.nativeElement) {
    console.warn('iframe未完成加载，暂无法获取内部元素');
    return;
  }
  try {
    const iframeEle = this.iframe.nativeElement;
    // 获取iframe内部文档对象，兼容不同浏览器写法
    const innerDocument = iframeEle.contentDocument || iframeEle.contentWindow.document;
    // 执行DOM查询获取表单元素
    const cusid_ele = innerDocument.getElementsByClassName('form-control');
    // 此处添加后续业务逻辑
  } catch (err) {
    console.error('获取iframe内部元素失败，通常为跨域导致：', err);
  }
}

注意事项 #

• 跨域场景下无法直接操作iframe内部DOM，只能通过postMessage方法实现父子页面的数据交互。
• 如果iframe内部页面会发生跳转，每次跳转完成后都会重新触发load事件，需要重新执行元素查询操作。

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