Iframe 在悬停时重新加载到其他组件，例如：工具提示

Question

我已使用 iframe 标记加载其中一个 url，但每次我将鼠标悬停在任何其他组件（例如：工具提示或打开任何下拉菜单）时，iframe 数据都会重新加载。它完全刷新了 iframe。

HTML代码：

<iframe scrolling="no" style="border-width:0px; overflow: hidden;" [src]=transform(mapUri)></iframe>

TS 文件代码：

import { Component, OnInit } from '@angular/core';
import { DomSanitizer } from "@angular/platform-browser";

export class TestComponent implements OnInit {

mapUri = "https://sub.domain.com/";

constructor(private sanitizer: DomSanitizer) {}

transform(url:any) {
        return this.sanitizer.bypassSecurityTrustResourceUrl(url);
    }
}

Answer 1

您处理 iframe src 清理的方式似乎做了以下其中一项：

触发了 iframe 的重新呈现
重新触发了转换功能，因此重新加载了您的 iframe 内容

每次您将鼠标悬停在页面上的任何其他组件时。

使用管道可能会阻止这种意外行为，而且在清理时，我发现将功能导出到专用管道更合适，这样您就可以在应用程序的不同组件中重用它，并且防止代码重复。

这是管道实现：

@Pipe({ name: 'safeUrl' })
export class SafeUrlPipe implements PipeTransform {
  constructor(private sanitizer: DomSanitizer) {}
  transform(url: string) {
      return this.sanitizer.bypassSecurityTrustResourceUrl(url);
  }
}

Iframe 在悬停时重新加载到其他组件，例如：工具提示

Iframe reloads on hover to other componets eg: tooltip

html

javascript

iframe

typescript

angular