Angular 10中loader.js动态创建的iframe如何集成iframe-resizer？

以下是针对该场景的两种可落地实现方案，以及额外优化思路：

方案1：手动给动态iframe绑定已有Angular指令 #

Angular支持将已写好的指令手动绑定到外部生成的DOM节点上，不需要修改现有loader.js的创建逻辑，操作步骤如下：

• 在iframe的宿主组件中注入ElementRef、Injector、DirectiveResolver三个依赖
• 拿到loader.js创建完成的iframe DOM节点后，手动实例化指令并绑定到该节点
• 按需手动触发指令的生命周期钩子即可，核心代码示例：

import { Component, ElementRef, Injector, DirectiveResolver } from '@angular/core';
import { IframeResizerDirective } from './iframe-resizer.directive';

@Component({
  selector: 'app-iframe-host',
  templateUrl: './iframe-host.component.html'
})
export class IframeHostComponent {
  constructor(
    private el: ElementRef,
    private injector: Injector,
    private directiveResolver: DirectiveResolver
  ) {}

  loadIframe() {
    // 调用现有loader.js逻辑拿到生成的iframe节点
    const iframe = window.loader.createIframe();
    this.el.nativeElement.appendChild(iframe);

    // 手动绑定iframe-resizer指令
    const directiveFactory = this.directiveResolver.resolve(IframeResizerDirective);
    const directiveRef = directiveFactory.create(this.injector, [], iframe);
    // 手动给指令Input参数赋值，替换为你的实际配置
    directiveRef.instance.resizeConfig = { log: false, autoResize: true };
    // 触发指令初始化生命周期
    if (directiveRef.instance.ngOnInit) directiveRef.instance.ngOnInit();

    // 组件销毁时同步销毁指令实例
    this.ngOnDestroy = () => {
      if (directiveRef.instance.ngOnDestroy) directiveRef.instance.ngOnDestroy();
    }
  }
}

方案2：跳过Angular指令，直接调用iframe-resizer原生API #

该方案实现更简单，出错概率更低，完全适配跨域场景：

• 首先在angular.json的scripts数组中引入iframe-resizer的原生JS文件，保证全局可调用iFrameResize方法
• 拿到动态生成的iframe节点后，在iframe加载完成后直接调用原生初始化方法即可，核心代码示例：

loadIframe() {
  const iframe = window.loader.createIframe();
  this.el.nativeElement.appendChild(iframe);

  iframe.onload = () => {
    window.iFrameResize({
      log: false,
      autoResize: true,
      checkOrigin: false // 跨域场景按需调整该配置
    }, iframe);
  }
}

可选优化方案 #

如果后续需要将iframe逻辑完全收敛到Angular体系内，可以抽离loader.js中的动态src生成逻辑，在宿主组件中用*ngIf动态渲染硬编码的iframe标签，直接绑定指令即可，模板示例：

<iframe 
  *ngIf="iframeSrc"
  appIframeResizer
  [src]="iframeSrc | safeUrlPipe"
  [resizeConfig]="resizeConfig"
></iframe>

注：safeUrlPipe为Angular安全管道，用于处理动态src的XSS校验，避免框架报错

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