HTML - srcdoc Attribute

The srcdoc is an HTML attribute that specifies the HTML content on the page to show in the inline frame. If the srcdoc attribute is present in the <iframe> element, then it will override the content specified in the src attribute.

If the srcdoc attribute is not present in the <iframe> element, then it will show the file specified in the src attribute.

it can be used together with sandbox and seamless attribute.

Syntax

Following is the syntax of the srcdoc attribute −

<iframe srcdoc="HTML_code" >

HTML_code − It is used to specify the HTML content of the page which will display in an iframe element.

Example

In the following example, we are illustrating how to return the iframe srcdoc property in the HTML document.

<!DOCTYPE html>
<html>
<head>
   <title>HTML iframe srcdoc Attribute</title>
</head>
<body>
   <h1 style="color: green;">tutorials <span style="color: black">point</span>
   </h1>
   <h2>HTML iframe srcdoc Attribute</h2>
   <iframe src="https://tutorialspoint.com/index.htm" srcdoc=" <p>Hi, I am tutorialspoint</p>" id="content" height="100" width="300" name="myGeeks">
   </iframe>
   <br>
   <button onclick="submit()"> Submit </button>
   <p id="demo" style="font-size:20px"></p>
   <script>
      function submit() {
         let x = document.getElementById("content").srcdoc;
         document.getElementById("demo").innerHTML = x;
      }
   </script>
</body>
</html>

On executing the above script, it will generate an output consisting of the iframe text along with a click button. when the user clicks the button it will displays the text entered in the iframe.

Example

The following example shows how to set or override the iframe srcdoc attribute based on the previously specified content of the srcdoc attribute.

<!DOCTYPE html>
<html>
<head>
   <title>HTML iframe srcdoc Attribute</title>
</head>
<body>
   <h1 style="color: green;">tutorials <span style="color: black">point</span>
   </h1>
   <h2>HTML iframe srcdoc Attribute</h2>
   <iframe src="https://tutorialspoint.com/index.htm" srcdoc=" <p>Hi, I am tutorialspoint</p>" id="content" height="50" width="300" name="myGeeks">
   </iframe>
   <br>
   <button onclick="submit()"> Submit </button>
   <p id="demo" style="font-size:20px"></p>
   <script>
      function submit() {
         let x = document.getElementById("content").srcdoc = "tutorialspoint Easy to learn!";
         document.getElementById("demo").innerHTML = "The value of the srcdoc attribute " + "was changed to " + x;
      }
   </script>
</body>
</html>

When we execute the above script, it will generate an output consisting of the iframe text along with thw button. when the user clicks the button it will displays the text in the iframe.

html_attributes_reference.htm
Advertisements