iFrames are evil. If you must, try this alternative.

May 1, 2008 - By Mike Tighe

The (really simple) alternative to iFrames

I wrote an article on my personal site some time ago and it has gotten consistent traffic over the past 8 months. So I thought I’d expand upon that original article and put my developer hat on for a little while.

Why are iFrames bad?

  • They are not web standards compliant.
  • Content in the iFrame will be treated as a separate page by the search engines.
  • iFrames don’t work in all browsers.
  • iFrames are hard to style, my alternative is easier.

Now I really don’t want to get into a ‘web standards’ debate with anyone. I find that using XHTML and CSS to create web sites, and generally conforming to the standards, to be the best way for me to make web sites.

So what is an iFrame Alternative?

The alternative iFrame does not use the “iframe” tag what so ever, instead we are using simple CSS to create a ’scrolling div’ - making it standards compliant. How does it work? Read on:

First, you need a DIV placed around the content you want contained in the iframe/scrolling div. I’m going to give the DIV a class of “iframe”. Then, place your content as you normally would in that DIV (as seen below):

<div class="iframe">
<p>Here is some content.</p>
</div>

Next up is the CSS. You can either put this in your CSS file (good), or place it in the actual HTML document as an inline style (bad).

In our CSS file we’re going to style the class we created, called ‘iframe’, to include the following CSS properties:

.iframe {
width: 400px;
height: 100px;
overflow: auto;
}

The ‘overflow:auto;’ element above is the key. It is what will add the scroll bars to the div with a constrained width and height.

The sky is the limit from here, some things you can also do include:

  • Add borders.
  • Background colors and images.
  • PHP Includes.
  • Position the scrolling div anywhere on the page using CSS.
  • Add javascript effects, such as an open/close box.

Example of the alternative iFrame or ’scrolling div’

Content as normal in here. You can put images if you really want.

By defining a specific area through CSS and then using the CSS element ‘overflow’ you can very easily create an iFrame alternative which is web standards and search engine friendly.

You could even use some PHP (or equivalent language) and include other data.

Spread the word:

We'd be honored if you'd help support SEMI by Stumbling us or voting for us on Sphinn.


Stumble it!

6 Comments so far... perhaps you would like to leave one?

Part of the reason for the iFrame however that is not mentioned in your alternative is the fact that they can be used to display content from third party websites (which isn’t really a good idea anyways since iFrames can be disabled with a single line of Javascript in the embedded page). This has actually just got me thinking that a cool web service to create would be to have a line of Javascript embedded in the page (probably in your overflow div or equivalent element) that would make a call to a service and apply either:

A scrape technique based on user defined elements that denote start and stop elements for specific pieces of the page that you would want to grab.

OR

Apply some XSLT and/or CSS to elements found within a specific element on a page.

OR

Some combination of both.

Basically you could have some XML document that defines which elements’ content you want to grab and the CSS to be applied to the end result if necessary. The XSLT may not be the most accessible way to go since if you can go through the trouble of writing the XSLT then you could probably write the rest of the component easily enough, but different strokes for different folks I guess.

In any case if anyone is ever considering using an iFrame to display third party content on your site please think again and try to develop something that actually takes the content from the site and formats it to your needs. Like all scraping methods this will require updates when the format of the embedded site changes but overall the user experience on your site will be more uniform and not disrupted by content that is styled differently than what you have on your site.

Comment by DevlinD — May 1, 2008 @ 2:23 pm

Wow, thanks Devlin.

Like you said, iFrame doesn’t even need to enter the loop with regards to 3rd party content - if PHP is setup for it, you can use includes to show 3rd party content.

I do know that Google Ads do use an iFrame. The biggest reason I think this might be is (1) it is a defined width and height, and (2) its hard for creative internet users to manipulate their code.

I think what you have suggested is very similar to what upcoming.org uses to embed content into sites. http://upcoming.yahoo.com/badge/

Comment by Mike Tighe — May 1, 2008 @ 2:31 pm

You could also pull in HTML from an external source using AJAX too, and by using some of the great libraries out there (I’m a huge fan of jQuery), loading specific elements are effortless.

Comment by Sam Lu — May 2, 2008 @ 9:02 pm

Whoops, I probably should mention though that loading content via AJAX probably doesn’t help with SEO though as it won’t be there when the bot crawls your page.

Comment by Sam Lu — May 2, 2008 @ 9:09 pm

Good post.

Only a note: if the div is identified by a “class”, then in the CSS the rule of that named class should be identified by a point (The # is fine if you use an ID to identify your div).

I’m sure you already knew this well, it’s a common mistake… but you may want to update the post.

Comment by Petro — May 7, 2008 @ 7:51 am

My bad, I totally mis-wrote that. Thanks for the catch Petro.

Comment by Mike Tighe — May 7, 2008 @ 11:57 am

RSS feed for comments on this post. TrackBack URL

Leave a comment