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. The task is to locate an iframe Element inside the Parent page and we have to use JavaScript in order to access/change the content of the iframe. 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. For this, 2 JavaScript properties will be used, i.e., the contentWindow & contentDocument will be used in order to access the iframe’s content.
Both the contentWindow & contentDocument properties can be used in a similar way, although, the contentWindow property will return a window object of the iframe element, whereas, the contentDocument property will only return the document object of the iframe element.
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;
contentDocument Property: The contentDocument property returns the Document object generated from the frame or iframe element. This property can be used by the host window to access the Document object associated with the frame or iframe element.
Syntax:
iframeElement.contentDocument;
We can also get the document object with the help of the contentWindow property.
Syntax: document object from contentWindow property:
iframeElement.contentWindow.document;
The above syntax will return the document object.
Approach 1: The following steps will be used to perform the task:
- Create an Index.html page as Parent Page.
- Create an iframe page and assign the path of that page to the iframe element in the parent page.
- Define the button and Iframe element inside the body section.
- When the button will be clicked, the javascript method will invoke.
- The Javascript method modifies the content of the iframe.
The below image illustrates the process for invoking javascript code in an iframe from the parent page:
Example 1: 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> <h1 style="color:green"> neveropen </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 -> p -> Changing InnerHTML if_doc.document.getElementsByTagName('p')[0].innerHTML = "Write & Earn"; } </script> </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;"> neveropen </h1> <h3> Invoke javascript code in an iframe from parent page </h3> <h3>Iframe Page</h3> <p>Contribute</p> </body> </html> |
Output:
Approach 2: The following steps will be used to perform the task:
- Define an <div> element in the iframe HTML source file and give an ID to it along with the onclick event.
- The method for on-click is written on the iframe page only. When this method will invoke, it will change the text color of the <div> element. Here, the main task is to perform the click event on the <div> element so that the method inside the <script> tag will be called.
- Get the object of the iframe source file document using the document.contentDocument method.
- The parent page will just perform the click event on the element of the iframe source file <div> element by selecting the element with the ID selector.
Example 2: In this example, we will be using the document.contentDocument property and invoking the JavaScript method. Here, we are calling a function or method that is defined on the iframe section page and we are creating a method in the parent page that will call the iframe page’s method. The iframe will change the color of the paragram from black to red.
- Index.html ( parent page )
HTML
<!DOCTYPE html> <html lang="en"> <head> <title> Invoking javascript code in an iframe from parent page </title> </head> <body> <h1 style="color:green"> neveropen </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" width="400" height="220"> </iframe> <script> change_iframe_content = () => { // contentDocument Property - // Returns Window Object const if_doc = document.getElementById("frame").contentDocument; console.log(if_doc.querySelector("#box-alert").click()); } </script> </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;"> neveropen </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 neveropen. </div> <script> change_content = () => { document.getElementById("box-alert").style.color = "red"; } </script> </body> </html> |
Output:
