javascript - Iframe se recarga al pasar el mouse sobre otros componentes, por ejemplo: tooltip

He utilizado la etiqueta iframe para cargar una de las URL, pero los datos del iframe se recargan cada vez que paso el cursor sobre cualquier otro componente, por ejemplo: tooltip, o abro cualquier menú desplegable. Esto refresca completamente el iframe.

Código HTML:

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

Código de archivo 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);
    }
}

Respuesta #1

parece que la forma en que manejaste la sanitización del src del iframe hizo una de las siguientes:

1. provocó un nuevo renderizado del iframe
2. reinició la función de transformación y por lo tanto recargó el contenido de su iframe

cada vez que pasabas el cursor sobre cualquier otro componente en la página.

Con el pipe, este comportamiento inesperado probablemente se evitará y también, al sanear, encuentro más adecuado exportar la funcionalidad a un pipe dedicado, de esta manera podrás reutilizarlo en diferentes componentes de tu aplicación y prevenir la duplicación de código.

aquí está la implementación de la tubería:

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