HTML DOM IFrame srcdoc Property

Last Updated : 20 Jun, 2023

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 that specifies the HTML content of the page that is displayed 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>
    <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() {
            let x = document.getElementById("GFG").srcdoc;
            document.getElementById("sudo").innerHTML = x;
        }
    </script>
</body>
 
</html>

Output:

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>
    <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() {
            let x = document.getElementById("GFG").srcdoc
                = "Hello Geeks";
            document.getElementById("sudo").innerHTML
                = "The value of the srcdoc attribute "
                + "was changed to " + x;
        }
    </script>
</body>
 
</html>