Insert an iframe in HTML source

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>

About these ads

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Follow

Get every new post delivered to your Inbox.

%d bloggers like this: