How to Get Element from an Iframe in JavaScript

Question

Apu November 21, 2022 . #Element . #HowTo

❌

How to Get Element from an Iframe in JavaScript

In this article we will learn how we can access an element (p, div, h1 etc.) from an iframe using JavaScript.

We have the following iframe with an id my-iframe.

<iframe id="my-iframe" src="https://www.3schools.in/p/example.html" width="300" height="200"></iframe>

To get an element from iframe, first we have to access the iframe using the JavaScript querySelector() method. E.g.

const myIframe = document.querySelector('#my-iframe');

Now, the variable myIframe has a property contentWindow which has the body object.

By using the body object, we can access all elements from iframe.

 const iWindow = myIframe.contentWindow;
 const iDocument = iWindow.document.
 
 const iElement = iDocument.querySelector("#note");
 iElement.style = "background-color:red";

<iframe id="my-iframe" src="/p/example.html" width="300" height="200"></iframe>
<button onclick="myFunc()">Click</button>
<script>
function myFunc(){
 const myIframe = document.querySelector('#my-iframe');
 const iWindow = myIframe.contentWindow;
 const iDocument = iWindow.document;
 const iElement = iDocument.querySelector("#note");
 iElement.style = "background-color:red";
}
</script>

Whenever you try to access an element from an iframe you may get some errors. There can be two reasons for the error.

You are trying to get an element from the iframe before the iframe is fully loaded.
The iframe should be in the same domain otherwise you cannot access an element from the iframe for security reasons.

Write Your Answer

Apu · Accepted Answer · 2022-11-21T05:30:00+05:30

In this article we will learn how we can access an element (p, div, h1 etc.) from an ifra…