Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

HTML | DOM IFrame srcdoc Property

  • Last Updated : 16 Aug, 2021

The HTML DOM IFrame srcdoc property is used to set or return the value of a srcdoc attribute of an <Iframe> element. The srcdoc attribute is used to specify the HTML content of the document in the <Iframe> element. It can be used together with the sandbox and seamless attributes. 

Syntax:

  • It returns the srcdoc property.
iframeObject.srcdoc
  • It is used to set the srcdoc property.
iframeObject.srcdoc = HTML_code

Property Values: 

  • HTML_code: It is used to specify the HTML content of the page which will display in an Iframe element.

Return Value: It returns a string value which specify the HTML content of the page that are display in the Iframe element.

Example 1: This example illustrates how to return the Iframe srcdoc property.

HTML




<!DOCTYPE html>
<html>
 
<head>
    <title>
        HTML DOM iframe srcdoc Property
    </title>
</head>
 
<body style="text-align:center;">
     
    <h1>GeeksforGeeks</h1>
     
    <h2>HTML DOM iframe srcdoc Property</h2>
     
            srcdoc="
<p>GeeksForGeeks</p>
" id="GFG"
            height="200" width="400" name="myGeeks">
    </iframe>
     
    <br><br>
     
    <button onclick="Geeks()">Submit</button>
     
    <p id="sudo" style="font-size:20px"></p>
          
     
    <script>
        function Geeks() {
            var x = document.getElementById("GFG").srcdoc;
            document.getElementById("sudo").innerHTML = x;
        }
    </script>
</body>
 
</html>

Output: 

  • Before Clicking on Button: 

  • After Clicking on Button: 

Example 2: This example illustrates how to set the Iframe srcdoc property.

HTML




<!DOCTYPE html>
<html>
 
<head>
    <title>
        HTML DOM iframe srcdoc Property
    </title>
</head>
 
<body style="text-align:center;">
     
    <h1>GeeksforGeeks</h1>
     
    <h2>HTML DOM iframe srcdoc Property</h2>
     
            srcdoc="
<p>GeeksForGeeks</p>
" id="GFG"
            height="200" width="400" name="myGeeks">
    </iframe>
     
    <br><br>
     
    <button onclick="Geeks()">Submit</button>
     
    <p id="sudo" style="font-size:20px"></p>
          
     
    <script>
        function Geeks() {
            var x = document.getElementById("GFG").srcdoc
                    = "Hello Geeks";
            document.getElementById("sudo").innerHTML
                    = "The value of the srcdoc attribute "
                    + "was changed to " + x;
        }
    </script>
</body>
 
</html>

Output:

  • Before Clicking on Button: 

  • After Clicking on Button:

Supported Browsers: The browsers supported by HTML DOM IFrame srcdoc Property are listed below:

  • Google Chrome 20.0
  • Firefox 25.0
  • Safari 6.0
  • Opera 15.0

 


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!