Develop the web site using iFrame model

Introduction:

In this article we are going to discuss about the iFrame model. As you know, it's an HTML tag that can be the part of web page which can show the page that has given as url for the iframe. I have designed an model web site which is fully designed on the iframe. Let us see in this article.

Iframe:

The iframe is an HTML element which can link the external page in the current web page. This will be running only in the portion of the web page. It will not get refresh of the full web page.

Let us see the syntax and attributes of the iFrame.

Src - path of the web page or external site url

Width - it can be pixel (px) or percentage (%)

Height - it can be pixel (px) or percentage (%)

Scrolling - Auto (It will do auto when the web page length exceeds the given size) No - It will break the page, Yes – it will do

For example

It will show the Google web page in the iframe window.

Master pages, Frame set Vs iFrame Model:

The iFrame window model will give better performance when compare with the Master pages. Because it will not get the entire page refresh and rendering from the server. Part of the web page only gets change and part will be requested and rendering as HTML from the server. Consider there is a page with 20kb size. Among that, 12 kb is iframe content. If you change the link of the iframe portion then that 12 kb will be replaced by the new file. Remaining 8kb will be the static. In the same style if you do in the Master pages concept, just we are inhering the common layout and enforce the standard styles throughout the web site. If you redirect to another web page then it will request and response as a full web page.

Sample Screen shots of the Attached sample web site

iFrame Screen 1. Default page in the iFrame model window

iFrame Screen 2. Profile Tab page in the iFrame model window

iFrame Screen 3. Video tab page in the iFrame model window

iFrame Screen 4. Video view page in the iFrame model window

Disadvantages:

There are some disadvantages.

Consider, there is only one parent page and remaining is the child page. By default, we set one page. After that you have redirected several pages. Now you refresh the page then you can see now it will be there in default page. Even though if you do post back then it will be there in default page. Obviously we have to write the coding to handle the issues.

If you develop this iframe window model in the programming languages like ASP.Net, Java, PHP then it can be handle in the server side. But if youdevelop only in HTML then we can do in the JavaScript. Yes, we can store the current page in the hidden control, etc.., and then it can be handled in the JavaScript.

Next one, when you are in the iframe window if you redirect the page normally with the other main parent pages then within the iframe window the entire page will be shown. So, we have to use the JavaScript method like window.top.location.href.

Next one, if you have used any modal window in the child pages then definitely it will be center to that child page. We have to write the JavaScript to handle this issue.

Conclusion:

This method can be implemented in the few scenarios. I hope that, this article will you give the better idea about the iframe and its issue. I have attached the sample web site of this iframe implementation. Please post your feedback, corrections and suggestions about this article

4 Comments

Join the conversation! Your thoughts help the community grow.

vigneshwari ananthan7y ago
Sir where is the coding sir
Bala12y ago
thanks
ajay jangam14y ago
Hi SentiKumar it is really good example of Iframe Thank you.......
Alex17y ago
Seriously? Yeah, I registered just so I could ask that.