Javascript Reference - HTML DOM IFrame srcdoc Property








The srcdoc attribute from <iframe> element specifies the HTML content of the page to shown in the inline frame.

The srcdoc property sets or gets the value of the srcdoc attribute in an iframe element.

Browser Support

srcdoc Yes No Yes Yes Yes

Syntax

Return the srcdoc property.

var v = iframeObject.srcdoc

Set the srcdoc property.

iframeObject.srcdoc=HTML_code




Property Values

Value Description
HTML_code Set the HTML content to show in the iframe.

Return Value

A String type value representing the HTML content that is shown in the iframe.

Example

The following code shows how to get the HTML content that is shown in an iframe.


<!DOCTYPE html>
<html>
<body>
<iframe id="myFrame" srcdoc="<p>Hello world!</p>" src="http://example.com"></iframe>
<p id="demo"></p>
<button onclick="myFunction()">test</button>
<script>
function myFunction() {<!--   ww  w .j  a va  2s  . c  om-->
    var x = document.getElementById("myFrame").srcdoc;
    document.getElementById("demo").innerHTML = x;
}
</script>
</body>
</html>

The code above is rendered as follows:





Example 2

The following code shows how to change the HTML content that is shown in an iframe.


<!DOCTYPE html>
<html>
<body>
<iframe id="myFrame" srcdoc="<p>Hello world!</p>" src="http://example.com"></iframe>
<button onclick="myFunction()">test</button>
<script>
function myFunction() {<!--   www  .  ja  v a  2s . co m-->
    document.getElementById("myFrame").srcdoc = "<p>new content!</p>";
}
</script>

</body>
</html>

The code above is rendered as follows: