HTML | DOM IFrame srcdoc Property

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.

<!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>  
      
    <iframe src="https://ide.geeksforgeeks.org/index.php"
            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.

<!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>  
      
    <iframe src="https://ide.geeksforgeeks.org/index.php"
            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 Clcking 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

Recommended Posts: