Angular - How to call ngOnDestroy when change [src] in iFrame

Question

I have one slide show application that support only many internal link.

HTML

<iframe width="100%" id="iframeSlide" height="100%" #iframe frameBorder="0" [src]="urlSafe"></iframe>

TS code

current.urlSafe = current.sanitizer.bypassSecurityTrustResourceUrl(current.slideUrls[current.index]);

slideUrls is an array contains list of internal link, but when new url set to current.urlSafe, the old url did not call ngOnDestroy function to release resource.

I tried to set current.urlSafe = "about:blank";

or

var frame = document.getElementById("iframeSlide"),
frameDoc = frame.contentDocument || frame.contentWindow.document;
frameDoc.removeChild(frameDoc.documentElement);

But it did not call ngOnDestroy function. In the internal page, I used setInterval function so need go to ngOnDestroy to clear the Interval, without it many request to called inside setInterval.

Links I refereed

https://web.dev/detached-window-memory-leaks/

How do I clear all intervals?

score 0 · Answer 1 · answered Oct 27 '21 at 06:03

0

Changing the iframe src would be the equivalent to navigating to a new url in the browser address bar. The browser itself clears the top level JS/HTML resources in this case

ngOnDestroy would occur if you remove components or services within the app, but not on a refresh

answered Oct 27 '21 at 06:03

Drenai

11,315
9
48
82

but i use console log, the setInterval did not clear yet, how to clear interval in this case? – Hien Nguyen Oct 27 '21 at 06:04
Is the iframe src being changed to a new domain? – Drenai Oct 27 '21 at 06:30
nope, all are internal link in angular app – Hien Nguyen Oct 27 '21 at 06:45
Ah, I think I misunderstood. You could give examples of links, and more detail on setInterval/request issue. I read the memory leak link you posted, interesting – Drenai Oct 27 '21 at 06:55

Angular - How to call ngOnDestroy when change [src] in iFrame

1 Answers1