So it seems that every job I work on, the same topic comes up. Someone, at some point will say, “just use an iFrame for that”. Then I need to go down the old tired road as to why that would not be a good idea.
Well, this article is going to be a bit utilitarian for me. I hope to put down in a single place all the reasons iFrames are not a cure-all solutions so that I can save myself some time in the future and just point people to this URL. As such I may update this post on occasion as I refine these points. Feel free to use this post for that same purpose if you like, and please post any suggestions or points I have missed to my twitter account (@rwbDev), I’ll be sure to credit you if I add the point to this article.
Now, let me be clear. iFrames do have a valid purpose. I have actually used iFrames many times myself with great success. The problem is that people tend to want to use them to get around poor architecture, or as a simply fix to a problem. In my experience this usually just trades a small problem for a much bigger problem down the road, and more often than not it’s an unnecessary trade off. I will cover both these points below.
First let me list some of the shortcomings of iFrames.
* Note (added June 6th, 2013): Recent tests have shown that search engines may in fact follow links within an iFrame. This means the SEO impact of an iFrame is much less than it has been in the past. It is still unclear that there is no impact and different search engines may behave differently in this regards.
So I have talked plenty about why you might not want to use an iFrame if you can avoid it. But how do you avoid it?
First, most of the time an iFrame can be avoided with simply architecting the site or application slightly better. Here are some resources you might want to look into:
However, sometimes you run into situations which are not architectural. Maybe you have a perfectly robust architecture but still have a need to include sub-content inline within the page. In this case you should check out jQuery, and specifically the load() function:
This will have some of the same drawbacks as iFrames. Namely this content will not be visible to Search Engines either (and therefore not good for SEO) and will not be bookmarkable/linkable without extra code. However, this is a far more stable solution that I think you will find is easier to maintain and more flexible.
If neither of these solution help you, or for some reason are not feasible in your situation, feel free to send me a message (email or twitter – @rwbDev) and I would be more then happy to brainstorm some alternative solutions with you.
Perhaps in the future I will expand this section to provide a comprehensive check list. But for now, I do not think there are hard and fast rules around this per se. My suggestion would be to simply exhaust all other options first. Don’t just jump to the iFrame solution because it seems easy on the surface. Really challenge the assumptions and make sure there is not a better way.