Iframe reloads on hover to other componets eg: tooltip

user_7476938 0
Viewed 100

I have used iframe tag to load one of the url, but iframe data reloads every time when i hover to any other component, eg: tooltip, or open any dropdown. It totally refresh the iframe.

HTML Code:

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

TS File Code:

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);
    }
}
angular typescript iframe html javascript
1 Answers

it seems like the way you handled the iframe src sanitization did one of the following:

  1. triggered a rerender of the iframe
  2. retriggered the transform function and hence reloaded your iframe content

every time you were hovering any other component on the page.

with pipe this unexpected behavior will probably be prevented and also when sanitizing, I find it more suitable to export the functionality to a dedicated pipe so this way you'll be able to reuse it across different components on your app and prevent code duplication.

here's the pipe implementation:

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