The HTML <iframe> tag denotes an inline frame within the HTML document. The primary usage of the inline frame is to embed another document within the current HTML document. In order to embed the intended document within the <iframe>, the address of the target document should be specified as src attribute value.
The following simple code snippet shows how to embed this page within another HTML document.
<!DOCTYPE html>
<html>
<body>
<iframe src="http://www.duleekag.blogspot.com" width="200" height="200">
<p>iframes are not supported.</p>
</iframe>
</body>
</html>
The paragraph tag (<p>) is used to indicate the browsers that do not support this tag.
The intended purpose of <iframe> is to embed another document within the current HTML document. But sometimes, we all get the urge to tryout unorthodox stuff within our code. This is one such scenario where hard coded HTML content is embedded within an <iframe>. The obvious question is "why bother to add it within an <iframe>, if the content can be hard coded". Well.. this is just out of curiosity.
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>iframe without src attribute</title>
<script type="text/javascript">
function onTryItClick() {
var content = document.getElementById("iframecontent").innerHTML;
var iframe = document.getElementById("myiframeid");
var frameDoc = iframe.document;
if (iframe.contentWindow)
frameDoc = iframe.contentWindow.document;
frameDoc.open();
frameDoc.writeln(content);
frameDoc.close();
}
</script>
</head>
<body>
<div id="iframecontent" style="display: none;">
<b>Hello World!</b> <br /> <i>Hello Again !</i>
</div>
<div style="margin: auto; width: 80%;">
<iframe height="100" width="100%" src="about:blank" name="myiframe"
id="myiframeid"> </iframe>
<br />
<button id="tryIt" onclick="onTryItClick()">Try It</button>
</div>
</body>
</html>
Nice articel, This article help me very well. Thank you. Also please check my article on my site Know All About Auto Adjust HTML IFrame Height According To Its Page Contents Height Using JavaScript.
ReplyDelete