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>
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";
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.