Insert an iframe in HTML source

January 3, 2008

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>


iFrames – dos and donts

January 2, 2008

iFrame scripting has been underrated for a long period of time, i guess because it was assimilated to frame navigation. It just sounded a too chaotic way of scripting Web Pages and a gateway for malicious coding. With the emergence of Ajax, iFrames are now back in our HTML sources. Why is that so?

Segment the information

A web page can contain quiet an amount of informations. Web masters want as much content as possible in one page: RSS feeds, comment forms, image slide show -just name it. The only problem is that if one item of the page needs to be reloaded, all the others will be, because a web page is seen as an entire and non-dividable entity.

sports.fr is a French Web Site about soccer. They have a RSS feed on each page. To make sure information is updated frequently and accurate, they reload the RSS module every minute or so – but since everything is linked in a Web Page, the whole page refreshes itself. If you are reading an article – users comments included, the page will automatically reload two or three times, so you end up spending 5 or more minutes in a page that would require only 1 or 2 minutes of reading time. What if RSS module could reload itself without reloading the whole page? That’s where iFrame scripting comes handy.

I heard iframes are not w3c-compliant

If you script in XHTML, iframe is not recommended by W3C. Yet, its utility is more related to JavaScript than it is to XML. Google is also reluctant to iframes and says it could ignore documents containing iframes because they are not “well-formed”, yet it will still index the iFrame if specified in the robot.txt.

With all due respect to both w3c and the Goog, iframes have proved to be quiet useful right now as a transitional state to more elaborate HTTP requests inside a document. As it is, an iframe is expected to be a HTML document with HTML as a root element and HEAD and BODY as children, when most of the times, we don’t need to generate an HTML document, but just a piece of code whose server queries will be independent from parent document. Javascript tricks and XMLrequest, once more elaborated and cross-platform, will replace the iframes. Nonetheless, as today, iFrame is a quick and efficient solution to program fast and user-friendly Web applications.