Skip to content
Related Articles

Related Articles

Improve Article
How to insert HTML content into an iFrame using jQuery?
  • Last Updated : 27 Sep, 2019

Here is the task to insert HTML content into an iFrame using jQuery. To do so, we can use the jQuery contents() method.

The .contents() method: It returns all the direct children, including text and comment nodes for the selected element.

Syntax:

$(selector).contents()
    Approach:

  • Find the iframe in the body section.
  • Get the value to be inserted in the iframe in the body section
  • Place the value in the iframe

jQuery code to show the working of this approach:
Example 1:






<!DOCTYPE html>
<html>
  
<head>
    <title>How to insert HTML content 
      into an iFrame using jQuery?</title>
  </script>
    <style type="text/css">
        textarea,
        iframe {
            display: block;
            margin: 10px 0;
        }
          
        iframe {
            width: 500px;
            border: 1px solid #000000;
        }
    </style>
</head>
  
<body>
    <center>
        <h1 style="color:green;"
        GeeksForGeeks 
    </h1>
        <h3>
          How to insert HTML content into an iFrame using jQuery
      </h3>
        <textarea rows="2" cols="40" style="text-align:center;">
          GEEKSFORGEEKS - A computer science portal for geeks.
      </textarea>
        <button type="button" onclick="updateIframe()">
          Click to Insert
      </button>
        <iframe style="text-align:center;" id="myframe"></iframe>
        <script type="text/javascript">
            function updateIframe() {
                var myFrame = $("#myframe").contents().find('body');
                var textareaValue = $("textarea").val();
                myFrame.html(textareaValue);
            }
        </script>
    </center>
</body>
  
</html>

Output:
Before Click on the Button:

After Click on the Button:

Example 2:




<!DOCTYPE html>
<html>
  
<head>
    <title>How to insert HTML content
      into an iFrame using jQuery?</title>
  </script>
    <style type="text/css">
        iframe {
            width: 500px;
            border: 1px solid #000000;
        }
    </style>
</head>
  
<body>
    <center>
        <h1 style="color:green;"
        GeeksForGeeks 
    </h1>
        <h3>How to insert HTML content 
          into an iFrame using jQuery</h3>
        
        <h4>Text to be insert : "GEEKSFORGEEKS 
          - A computer science portal for geeks."</h4>
        <iframe style="text-align:center;" id="iframe">
      </iframe>
        <script>
            $("#iframe").ready(function() {
                var body = $("#iframe").contents().find("body");
                body.append(
                  'GEEKSFORGEEKS - A computer science portal for geeks.');
            });
        </script>
    </center>
</body>
  
</html>

Output:




My Personal Notes arrow_drop_up
Recommended Articles
Page :