Open In App

How to invoke JavaScript code in an iframe from parent page ?

Improve
Improve
Like Article
Like
Save
Share
Report

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:

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">
            GeeksforGeeks
        </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;">
        GeeksforGeeks
    </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:

changeIfrGIF

cotentDocument 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 using below property. 

iframeElement.contentWindow.document;

Example: The below example shows how the color of the iframe text will be changed on click to the button that is present in the parent document.

Index.html ( parent page )

HTML




<!DOCTYPE html>
<html lang="en">
 
<head>
    <title>
        Invoking javascript code in
        an iframe from parent page
    </title>
</head>
 
<body>
    <center>
      <h1 style="color:green">
          GeeksforGeeks
      </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>
    </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;">
        GeeksforGeeks
    </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:

changeIfrGIF



Last Updated : 22 Dec, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads