如何替换iframe内的当前应用为新应用并在加载完成前显示加载器

嗨，我来帮你搞定这个问题！核心思路是让父应用接管加载器的显示/隐藏和iframe的URL修改，这样就不会因为直接替换iframe地址导致当前Angular落地页的代码被中断，没法控制加载器了。具体步骤如下：

1. 父应用准备加载器与消息监听 #

首先在父应用里，给iframe加一个覆盖式的加载器（默认隐藏），同时监听来自iframe的消息：

<!-- 父应用的HTML结构 -->
<div style="position: relative; width: 800px; height: 600px;">
  <!-- 加载器：默认隐藏，覆盖整个iframe区域 -->
  <div id="appLoader" style="
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255,255,255,0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    display: none;
  ">
    应用加载中，请稍候...
  </div>
  <!-- 嵌入Angular落地页的iframe -->
  <iframe id="appIframe" src="/your-angular-landing-page" width="100%" height="100%" frameborder="0"></iframe>
</div>

<script>
// 父应用的JS代码
const loader = document.getElementById('appLoader');
const iframe = document.getElementById('appIframe');

// 监听来自iframe的消息，建议验证来源避免安全风险
window.addEventListener('message', (event) => {
  if (event.origin !== 'https://your-app-domain.com') return;

  // 收到切换应用的请求
  if (event.data.type === 'SwitchApp') {
    loader.style.display = 'flex'; // 显示加载器
    iframe.src = event.data.newUrl; // 切换iframe地址
  }

  // 收到新应用加载完成的通知
  if (event.data.MessageType === 'AngularAppLoaded') {
    loader.style.display = 'none'; // 隐藏加载器
  }
});
</script>

2. Angular落地页处理图标点击事件 #

在你的Angular落地页里，点击图标时不要直接修改iframe的src，而是给父应用发消息请求切换：

// Angular组件中的点击事件处理函数
onAppIconClick(newAppUrl: string) {
  // 向父应用发送切换应用的消息
  window.parent.postMessage(
    { type: 'SwitchApp', newUrl: newAppUrl },
    'https://your-parent-app-domain.com' // 需与父应用域名一致，保障安全
  );
}

3. 新应用发送加载完成通知 #

确保新应用在加载完成后，给父应用发送约定好的消息：

// 新Angular应用的初始化逻辑（比如在AppComponent的ngAfterViewInit中）
ngAfterViewInit() {
  // 通知父应用加载完成
  window.parent.postMessage(
    { MessageType: 'AngularAppLoaded' },
    'https://your-parent-app-domain.com'
  );
}

整个流程就通了：点击图标→Angular落地页通知父应用→父应用显示加载器并切换iframe地址→新应用加载完成后通知父应用→父应用隐藏加载器。完全不会出现代码被中断的问题，因为加载器的控制权在父应用手里，不受iframe页面切换的影响。

备注：内容来源于stack exchange，提问作者Turumella Aditya