Angular中使用DomSanitizer时iframe加载URL慢短暂显示网页找不到如何解决

你当前的写法是在模板中直接调用getUrl()方法获取处理后的地址，Angular每次触发变更检测时都会重新执行该方法，每次调用bypassSecurityTrustResourceUrl都会返回全新的SafeResourceUrl实例，会被识别为src属性发生了变更。同时初始化阶段地址还未完成安全处理时，iframe会先加载空值或无效值，就会出现短暂的「网页找不到」提示。
你之前用管道处理仍未解决，大概率是没有配合延迟渲染逻辑，iframe在拿到有效安全地址前就已经完成了首次渲染，加载了无效地址。

步骤1：提前预处理安全地址，不要在模板中动态调用方法生成 #

在TS中定义变量存储预处理完成的安全地址，仅当原始url更新时才重新做安全转换：

import { SafeResourceUrl } from '@angular/platform-browser';

// 定义存储安全地址的变量
safeIframeUrl?: SafeResourceUrl;

// 在原始url赋值完成后立刻做安全转换，比如ngOnInit生命周期、接口返回url之后
initIframeUrl(rawUrl: string) {
  this.url = rawUrl;
  this.safeIframeUrl = this.sanitizer.bypassSecurityTrustResourceUrl(rawUrl);
}

步骤2：模板中绑定预生成的地址，且仅当地址有效时才渲染iframe #

给iframe加*ngIf判断，等安全地址生成之后再渲染节点，避免加载无效地址触发错误提示：

<iframe 
  *ngIf="safeIframeUrl"
  [src]="safeIframeUrl" 
  style="width: inherit"
  [height]="frameHeight"
  frameborder="0" 
  allowfullscreen="allowfullscreen">
</iframe>

如果你的iframe地址需要动态更新，只要每次更新原始url时同步重新生成safeIframeUrl即可，不需要改动模板逻辑。

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