Check if the element inside an iFrame has any content

Question

So I've tried to do a bunch of research and can't seem to find the correct answer for my question so I wanted to reach out and see if anyone knows much.

What I'm attempting to achieve:
Check the contents inside an iFrame and return a boolean whether there is content or not.

Here is what I've attempted:

function check_iframe_body_content(element) {
    let has_content = false;

    let iframe = element.contents().find('body');
    console.log(iframe);

    if (iframe.length > 0) {
        has_content = true;
    }

    return has_content;
}

The element is the iFrame return, which will be an array:

When the script tags are disabled, I get the following return:

When the script tags are enabled, I get the following return:

How can I properly determine if the <body> is empty and when it's not? I've tried to do .length on multiple different occasions and each time it comes back as has_content = true because it finds the body element, but it's actually empty.

All help will be appreciated!

@SimoneRossaini, do you have an example of a proper use case like this? I never attempted to try to grab contents from an iFrame, wouldn't `innerHTML` return true anyways on an empty body since `` is HTML? — , Nov 11 '21 at 14:24
Does this answer your question? [How to identify if a webpage is being loaded inside an iframe or directly into the browser window?](https://stackoverflow.com/questions/326069/how-to-identify-if-a-webpage-is-being-loaded-inside-an-iframe-or-directly-into-t) — Ron, Nov 11 '21 at 14:24
If you use `querySelector` like `iframe.querySelector('body')` then check if `innerHTML` is empty or not. i think that work. — Simone Rossaini, Nov 11 '21 at 14:26

Pooya Estakhri · Answer 1 · 2021-11-11T14:34:42.100

0

You wont have access to the content inside iframe if it's loaded from another website as it's a major security breach. if that was possible a website could add an iframe to google.com and get access to user personal information like their email address, name and etc.

depending on why you want to check content of iframe, there might be other workarounds.

edited Nov 11 '21 at 14:34

answered Nov 11 '21 at 14:25

Pooya Estakhri

1,129
1
11
25

1

[How to get the body's content of an iframe in Javascript?](https://stackoverflow.com/questions/926916/how-to-get-the-bodys-content-of-an-iframe-in-javascript) – Simone Rossaini Nov 11 '21 at 14:27
So long story short, I am implementing OneTrust, which is a cookie compliance tool and it leaves a blank component on iFrames when the scripts/cookies are blocked - Basically need to determine if an iFrame has empty content and then add a message on top to let users know that they are seeing a white screen because the cookies are blocked. – Nov 11 '21 at 14:28
So iframe is loaded from a third party website and you want to see if it has loaded some content or not ? correct ? – Pooya Estakhri Nov 11 '21 at 14:31
@PooyaEstakhri, correct - We are adding in a iFrame and I want to display an message if the iFrame has no content when loaded. otherwise load it regularly and don't display a message if it has content. – Nov 11 '21 at 14:34
As i mentioned in the answer, you cant check contents of an iframe if it's loaded from a third party website. but what you can do is to check if third party cookies are enabled. check here :https://stackoverflow.com/questions/3550790/check-if-third-party-cookies-are-enabled – Pooya Estakhri Nov 11 '21 at 14:36
@SimoneRossaini not if it's a third party website. – Pooya Estakhri Nov 11 '21 at 14:37

Check if the element inside an iFrame has any content

1 Answers1