Question

我正在开发 Ionic 3 应用程序。在div内，我正在 iframe 中加载外部URL ，并且加载效果非常好。但是当聚焦时会产生问题。 iframe每次对焦时都会重新加载。

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

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

场景03 ：我在iframe中加载的外部网址具有一些输入控件。因此，我想在这些输入框中输入内容，出现键盘，但同时iframe重新加载，并且我无法在这些输入框中提供任何数据。

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

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

但是， ionFocus 和 ionBlur 事件均未触发。

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

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

如果iframe被键盘或滑动抽屉或其他物品弄焦了，如何停止重新加载iframe？

Answer 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);
}

如果专注于Ionic 3，则iframe会重新加载

1 个答案: