How to manage that iframe was loaded when given url return 204

Question

I saw the response given here:

How to rightly detect iframe was loaded with response 204 No Content?

but it didn't help.

It is possible, to check (using events, not checking a content of an iframe), that iframe was loaded (request was send)?

Example:

stackblitz

do you have access to the code of the webapp within the iframe? — Krzysztof Krzeszewski, Oct 30 '20 at 11:57
I need to make an assumption that I will not have access to the code of page under given url — Aleksander Burzec, Oct 30 '20 at 12:09
This isn't really an angular question. Javascript in general can't really handle proper error detection on iframes. — Eliezer Berlin, Nov 12 '20 at 13:08
@EliezerBerlin So, do you know how to handle this situation? — Aleksander Burzec, Nov 14 '20 at 21:54
@AleksanderBurzec Sorry. I asked Google, but he was pretty unhelpful. But if you come up with a JS solution, I'd be happy to help translate it into Angular, no problem. — Eliezer Berlin, Nov 15 '20 at 14:04

myjobistobehappy · Answer 1 · 2020-11-15T21:20:47.660

1

You can detect the load event of an iframe, but not the status of 204 unless you use a fetch or xmlhttprequest. This still cannot be perfect because that website's httpheader may allow for it be embedded in iframes but not fetched.

edited Nov 15 '20 at 21:20

answered Nov 15 '20 at 06:32

myjobistobehappy

736
5
16

score 0 · Answer 2 · answered Nov 10 '20 at 10:49

0

You could use iframe onLoad event and can detect if the iframe has been loaded.

Example:

 <iframe src="https://fr.wikipedia.org/wiki/Main_Page" onLoad="(() => console.log('Loaded'))()" />

answered Nov 10 '20 at 10:49

Sohail Ashraf

10,078
2
26
42

onLoad is not triggerred when page returns 204 (No content) - see stackblitz example – Aleksander Burzec Nov 10 '20 at 12:01
You could use ajax request to check if the iframe url has 204 status code or not. – Sohail Ashraf Nov 10 '20 at 15:18

yochanan sheinberger · Answer 3 · 2020-11-16T07:16:35.220

-1

this is what i managed to do. i grabbed the iframe element with ElementRef.

html:

<iframe #iframe name="blah" id="blah" src="https://httpstat.us/204"></iframe>

ts:

@ViewChild("iframe") iframe: ElementRef;

end AfterViewInit i am checking if the src string ends with '204'.

  ngAfterViewInit(): void {
    const src = this.iframe.nativeElement.getAttribute("src");
    if (src.endsWith("204")) {
      console.log("iframe loading failed");
    } else {
      console.log("iframe load succesfuly");
    }
  }

see here: stack blitz

edited Nov 16 '20 at 07:16

answered Nov 16 '20 at 00:33

yochanan sheinberger

715
1
6
10

This is an example url, which returns 204. In real scenario that can be "https://httpstat.us/blah" or "https://httpstat.us/otherOne" and this is really funny solution – Aleksander Burzec Nov 16 '20 at 08:36
You can modify it to check if it doesn't match the expected src on a successful load. Can't you? – yochanan sheinberger Nov 16 '20 at 08:46
This is not a root of a problem. Checking url pattern is not a solution – Aleksander Burzec Nov 16 '20 at 08:47
What kind of solution are you expecting? – yochanan sheinberger Nov 16 '20 at 08:50
I want to know, that iframe was loaded, when given page returns http status "No Content". Standard event handlers are not triggered. – Aleksander Burzec Nov 16 '20 at 09:00

How to manage that iframe was loaded when given url return 204

3 Answers3