如果专注于 Ionic 3，iframe 会再次重新加载答案

【问题标题】：iframe reloads again if focused out in Ionic 3如果专注于 Ionic 3，iframe 会再次重新加载
【发布时间】：2020-12-29 21:51:38
【问题描述】：

我正在开发一个 Ionic 3 应用程序。在一个 div 中，我正在一个 iframe 中加载一个 external url，并且它正在完美加载。但是当注意力集中时它会产生问题。 每次聚焦时 iframe 都会重新加载。

Scenario-01：在我加载了 iframe 的页面中，iframe 之外还有其他控件，例如用于输入一些数据的文本框。因此，当我单击文本框时，会出现键盘，但同时 iframe 会再次重新加载。

场景 02：我在应用程序中从左到右有一个菜单滑动抽屉。当我打开滑动抽屉选择另一个页面时，我可以看到现有页面的 iframe 再次重新加载。

Scenario-03：我在 iframe 中加载的外部 url 有一些输入控件。所以，我想在这些输入框中输入一些东西，键盘出现，但同时 iframe 被重新加载，我无法在这些输入框中提供任何数据。

根据我的假设，iframe 在聚焦时会引起问题。因此，我尝试捕获该 iframe 的 blur 事件并尝试停止该事件的传播。

<iframe width="100%" height="100%" [src]="url| safeHtml:'resourceUrl'" (ionBlur)="checkBlur($event)" (ionFocus)="checkFocus($event)"></iframe>

但是，ionFocus 和 ionBlur 事件都没有触发。

目前，当我尝试使用 Android 应用程序时，所有场景都会触发 iframe 重新加载。由于键盘没有出现在浏览器中，当我尝试使用 Browser 时，只有 Scenario-02 会触发 iframe 重新加载。

iframe 应该只在第一次加载。然后用户可以在 iframe 内部或 iframe 外部执行任何操作，但 iframe 不应再次加载。

如果 iframe 通过键盘或滑动抽屉或其他任何东西聚焦，如何停止重新加载 iframe？

【问题讨论】：

标签： ionic-framework iframe ionic3

【解决方案1】：

我想出了解决办法。问题出在 safeHtml:'resourceUrl' 管道上。每次 iframe 成为焦点并准备新的 ResourceURL 时，它都会进行清理。结果，iframe 每次都会重新加载。

所以，我事先在 ts 中清理了 url 并将其设置为变量。结果，iframe 不再重新加载。我已经使用DomSanitizer 来清理资源网址。

url: any;

constructor(private domSanitizer: DomSanitizer) {
    this.url= this.getSantizedURL();
}

getSantizedURL() {
   this.domSanitizer.bypassSecurityTrustResourceUrl(mySampleURL);
}

【讨论】：