Comments on: iFrames are evil. If you must, try this alternative.

By: Mike Tighe

Mike Tighe — Fri, 03 Oct 2008 18:09:49 +0000

No problem Sam I’m glad that you found it useful.

While I’ll agree with Johnny that there is a use for an iFrame, many people end up using them when coding a site who really shouldn’t - using what I propose here is an alternative, but like any solution it should be based on what you hope to achieve.

By: Sam

Sam — Wed, 24 Sep 2008 20:02:00 +0000

Thanks for this clear article. Helped a very non-techie me to try it out, the site is the “NEWSFEED” page on the website you can get to clicking my name. It contains an RSS feed (or is supposed to) I just need to find out how to get the “frame” to display another page inside it using html and php which will link in the RSS feed and the individual RSS posts hopefully using the php.

By: Laura Callow

Laura Callow — Mon, 15 Sep 2008 19:56:03 +0000

@Johnny Bgood - first, this was a blog post, not a training manual. Therefore, the same can be said for any post re your comment ‘I think there is a lot more about this topic…’ of course there is…

Second, Mike did not say an iFrame was like a Div - he specifically says that you could, should you want to, try a scrolling Div as an ALTERNATIVE to an iFrame that would achieve a visually similar (for the human user) though far more search friendly result.

Third this comment ‘.. wouldn’t expect anything more from a wordpress user.’ is offensive and unecessary. Please don’t bother commenting if you can’t be more constructive in your ‘criticism’.

By: Johnny Bgood

Johnny Bgood — Tue, 09 Sep 2008 00:11:28 +0000

I think there is a lot more about this topic the article publisher has not dealt with. A Div is nothing like an IFRAME and serves a completely different purpose.

IFRAMES are not old DIV boxes..

Please read up on your web terminologys.. wouldnt expect anything more from a wordpress user.

By: Mike Tighe

Mike Tighe — Wed, 07 May 2008 19:57:07 +0000

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

By: Petro

Petro — Wed, 07 May 2008 15:51:54 +0000

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.

By: Sam Lu

Sam Lu — Sat, 03 May 2008 05:09:40 +0000

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.

By: Sam Lu

Sam Lu — Sat, 03 May 2008 05:02:45 +0000

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.

By: Mike Tighe

Mike Tighe — Thu, 01 May 2008 22:31:37 +0000

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/

By: DevlinD

DevlinD — Thu, 01 May 2008 22:23:07 +0000

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.

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

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.