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: