contentWindow Property
The contentWindow property returns the HTML iframeElement’s Window object. You can use this Window object to access the iframe’s document and its internal DOM. This attribute is read-only, but its properties can be manipulated like the global Window object.
Syntax:
iframeElement.contentWindow;
Example: In this example, we will be using the document.contentWindow property and invoking the JavaScript method.
Index.html(Parent Page)
HTML
<!DOCTYPE html><html lang="en"><head> <title> Invoke javascript code in an iframe from parent page </title></head><body> <center> <h1 style="color:green"> w3wiki </h1> <h3> Invoke javascript code in an iframe from parent page </h3> <h3>Parent Page</h3> <button onclick= "change_iframe_content()"> Change Iframe_Content </button><br><br><br> <!-- iframe window --> <iframe id="frame" src="./iframe_window.html" frameborder="1"> </iframe> <script> change_iframe_content = () => { // contentWindow Property - // Returns Window Object const if_doc = document. getElementById("frame"). contentWindow; // Accessing document -> // div -> Changing InnerHTML if_doc.document. getElementsByTagName('div')[0]. innerHTML = "Write & Earn"; } </script> </center></body></html> |
Iframe page:
HTML
<!DOCTYPE html><html lang="en"><head> <title> Invoke javascript code in an iframe from parent page </title></head><body> <h1 style="color: green;"> w3wiki </h1> <h3> Invoke javascript code in an iframe from parent page </h3> <h3>Iframe Page</h3> <div id="box-alert" onclick="change_content()"> A computer science portal for geeks. </div> <script> change_content = () => { document.getElementById("box-alert"). style.color = "red"; } </script></body></html> |
Output:
How to invoke JavaScript code in an iframe from parent page ?
In this article, we will see how to invoke JavaScript code in an iframe from a parent page, along with understanding their implementation through the illustrations. Here, JavaScript methods will be located inside the parent page only but can invoke methods in an iframe and can change or update the content of the iframe.
We can use the following approaches to accomplish this task:
Table of Content
- contentWindow Property
- contentDocument Property