How to check if an iframe is present in another iframe in JavaScript ?

In this article, we will see how to check if an iframe is present in another iframe, along with understanding its basic implementation with the help of a simple example.

An iFrame is an HTML element that allows users to embed a webpage within another webpage. It’s frequently used for displaying content from another website, such as a video or a social media widget. iFrames can be nested inside each other, which means that you can have an iFrame within another iFrame. Sometimes, you may need to check if an iFrame is present in another iFrame, which can be a bit tricky. In this article, we will show you how to do that using JavaScript.

Before we proceed, we will first understand how an iFrame works. An iFrame is essentially a separate HTML document embedded within another HTML document. When the browser encounters an iFrame element, it creates a new browsing context (i.e., a new window or tab) and loads the specified URL into that context. The contents of the iFrame are displayed within the original document, but they are technically separate.

Iframes are commonly used in the following scenarios:

• Embedding external content: If you want to embed content from a third-party website, such as a YouTube video or a social media post, you can use an iframe.
• Displaying content from other pages: If you want to display content from other pages of your website, you can use an iframe.
• Isolating content: If you want to isolate content from the rest of your web page, such as a login form or a shopping cart, you can use an iframe.

Approach: When an iFrame is present in another iFrame, the embedded document can be accessed through the contentWindow property of the outer iFrame. The contentWindow property returns a reference to the window object of the embedded document. By checking the contentWindow property of an iFrame, we can find if it contains another iFrame.

• Get a reference to the Outer Iframe using getElementById()

var outerIframe = document.getElementById('outer-iframe');

Now we have a reference to the outer iFrame, we can use the contentWindow property to access the embedded document and get a reference to the inner iFrame element. 

• Use the contentWindow to get a reference to the Inner Iframe

var innerIframe = outerIframe.contentWindow.document.getElementById('inner-iframe');

• Checking if the innerIframe is present in the OuterIframe

Now that we have a reference to the inner iFrame element, we can check if it is present in the outer iFrame. To do this, we need to check if the innerIframe variable is not null and has a tag name of ‘iframe’. We can use the tagName property of the element to check its tag name. For example:

if (outerIframe.contentWindow.document.contains(innerIframe)) {
    console.log('Inner iframe is present in the Outer iframe.');
} else {
    console.log('Inner iframe is not present in the Outer iframe.');
}

Example: In the following example, we will create an HTML file with an iframe in it, we will also embed another iframe in this iframe, Now we will use the above-mentioned approach to find if the iframe is present in another iframe. we will add the javascript code to check if an iframe is present in another iframe in the script tags in the main HTML file.

HTML code with nested iframes: In the below code, The window.addEventListener(‘load‘,..) will make sure that the code inside the script tags will run only after the document is completely loaded.

• index.html

• outer.html

• inner.html: In the below file, when the inner iframe is loaded completely we will call the checkIframe() method to check if the iframe is present inside another iframe.

Output: