Inserting an iframe requires little coding knowledge. It’s just an HTML tag, universally supported and cross-browser safe. Just insert the following code in your source:
<iframe
name="myIFrame"
src="aFolder/aFile.html"
></iframe>
Two attributes need to be declared:
name
src
name
will be used by JavaScript to identify the iFrame in the DOM. src
links to the file iFrame has to upload. Note that if you put an external link (outside your domain), iframe will still load the link (ie, <iframe src="http://www.google.com" />
). Unless this external link points to a site that consents to be “iFramed” by your site, it is not recommended to do so.
I find it better to actually not write the src
attribute in the HTML code but in JavaScript. This fragments the download of the page hence avoiding taking too much bandwidth. While iframe loads, you can program in css animated progress bar to display where the iFrame will load, to emphasize interactivity.
Also, keep in mind that iFrames are here to lighten web pages, so don’t upload all iframes in the same time. Use onloads, mouse events or time outs to create intuitive interfaces.
Code below is an example of a simple way to insert iframes in your HTML source:
<!-- DTD and XML declaration go here -->
<html>
<head>
<title>iFrame Example</title>
<style type="text/css">
iframe
{
background:#fff url(images/loading_bar.gif) no-repeat center center
}
</style>
<script type="text/javascript">
function ViewProfile()
{
profileIFrame=document.createElement("iframe")
profileIFrame.name="myProfile"
profileIFrame.src="profile/home.php"
document.body.appendChild(profileIFrame)
}
window.onload=function()
{
document.getElementById("iFrame1").src="comments/post.php"
document.getElementById("iFrame2").src="polls/p.27762.php"
document.getElementById("profile").onclick=ViewProfile
}
</script>
<head>
<body>
<h4>Use form below to post a comment</h4>
<iframe name="post_comment" id="iFrame1"></iframe>
<h4>Please take a moment to survey poll below</h4>
<iframe name="poll" id="iFrame2"></iframe>
<a href="javascript:void(0)" id="profile">Click here to view and manage your profile</a>
</body>
</html>