如何使用iframe-resizer适配高度可变的Angular组件嵌入iframe？

核心结论：需要修改Angular代码并重新构建——因为要在Angular应用中嵌入iframe-resizer的客户端逻辑，才能让iframe主动向宿主页同步高度变化。 #

步骤1：给Angular项目安装iframe-resizer依赖 #

在Angular项目根目录执行命令：

npm install iframe-resizer

步骤2：修改Angular代码并重新构建 #

两种引入客户端脚本的方式选其一即可：

• 方式一：全局脚本引入
  打开angular.json，找到build -> options -> scripts数组，添加客户端脚本路径：

  "scripts": [
    "node_modules/iframe-resizer/js/iframeResizer.contentWindow.min.js"
  ]
  

• 方式二：组件内引入
  打开根组件（比如src/app/app.component.ts），添加导入和初始化逻辑：

  import 'iframe-resizer/js/iframeResizer.contentWindow';
  
  export class AppComponent {
    ngOnInit() {
      // 仅在被嵌入iframe时初始化
      if (window.parent !== window) {
        (window as any).iFrameResizer = {
          checkOrigin: false, // 本地测试可关闭，生产环境需配置允许的宿主域名
          resizedCallback: () => console.log('高度已同步')
        };
      }
    }
  }
  

完成后执行构建命令更新静态文件：

ng build

步骤3：配置宿主页index2.html #

在index2.html中引入宿主端脚本并初始化iframe：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>宿主页面</title>
  <!-- 引入iframe-resizer宿主脚本 -->
  <script src="node_modules/iframe-resizer/js/iframeResizer.min.js"></script>
</head>
<body>
  <!-- 嵌入Angular构建后的index.html -->
  <iframe src="index.html" id="angularFrame" scrolling="no" frameborder="0" width="100%"></iframe>

  <script>
    // 初始化宿主端自适应逻辑
    iFrameResize({
      autoResize: true, // 自动监听内容变化调整高度
      log: false, // 生产环境关闭日志
      checkOrigin: false // 本地测试可关闭，生产环境指定可信域名，如['https://your-domain.com']
    }, '#angularFrame');
  </script>
</body>
</html>

注意：部署到服务器时，建议将iframe-resizer脚本复制到静态资源目录，避免依赖node_modules路径导致的加载问题。

额外提示 #

• 若Angular组件存在异步渲染场景（如接口请求后加载内容），iframe-resizer会自动监听DOM尺寸变化，无需额外处理。
• 生产环境务必开启checkOrigin并配置可信域名，防范跨域安全风险。

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