All About iFrames?


While I'm not new to developing websites, I've never had the opportunity to use iframes ... until now.  In addition, I believe I'll be using iframes in conjunction with a web service, but not positive.

So basically: what are iframes and how does one use them (i.e. what are the most common applications of iframes)?  

I know what I've seen of the code for them, but I would like to get some feedback from someone who has used them extensively to get a better sense of how they work and how to implement them.  URLs to a solid web tutorial on the subject are also welcome :)

Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

iframes use when you need to display 2 or more pages in a browser at the same time. for example you have a web page with chat box at the sidebar. the chat box may use iframe. for example look at my site (at the right sidebar there is a widget called shoutmix, it's iframe example.
iframes become most useful when a frequently external data needs to be loaded within another page.
Another necessity is when you need to display external data that does not reside on the same domain due to the Ajax cross-domain security measures.

An example would be on a page like here "" , where each When you click "Get this eVoucher" it opens a lightbox with the specific offer details and a form, the offers are dynamic and instead of loading all the instances of the forms and offer details for each of these buttons which would dramatically increase the loading time and size of the main page, they are being served through an external url & querystrings for the specific offer within an iframe.

This also allows updating the form, data etc.. without needing to interfere with the main page or content.

Another example using the same technique can be found here "" where clicking the class loads an external page with the relevant ID.

This is only one of the situations where the use of an iFrame can be effective and enhances the user experience and overall performance but the real life applications are endless.

I hope this was helpful

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
max7Author Commented:
>>>An example would be on a page like here "" ,

So in this instance, lightbox loads with content within an iframe dynamically generated ... is this done programatically using javascript to the make the call to the server for the content and place it within the iframe? Also, where does the mark up for the iframe reside before it appears on the page?

I noticed that the iframe in both website example you provided appear within div#mbImage ... are these sites using some sort of widget for this?

It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today

From novice to tech pro — start learning today.