BCmoney MobileTV

Example of an iFrame - Loading Google.com search bar

iFrames, love them or hate them they are all over the web.

When used properly, they can actually enhance a user’s experience for example by embedding multimedia or related content from a separate site, however when used improperly, and they often are, they can be an unsightly nuisance.

Mostly, I try to advocate proper uses of such technology for example embedding videos as per YouTube’s experimental HTML5 player and its new iFrame embed format (which others seem to be picking up on quickly). By the same token, from time to time I like to mess around and see what’s possible.

Here’s a border-line improper – if not entirely improper – usage of an <iframe> that I’ve thrown together just while toying around with the idea of displaying data from multiple sources at the same time.

First, you provide two separate class definitions, which state rules for when the iFrame is in focus (onmouseover, or after a hover event landed in an X/Y co-ordinate position over top the iFrame), and another which is the default state of “off” for when the iFrame is not in focus (onmouseout, or before any hover event occurs):

iframe.on {
  width: 800px;
  height: 800px;
}
iframe.off {
  width: 175px;
  height: 80px;
}

The JavaScript for dynamically resizing the iFrame is as follows:

function resizeiframe(the_iframe, status) {
   var the_iframe_src = the_iframe.src;
   the_iframe.className = status; 
}

Lastly, this function will append a given search term to all of the external iFrames we’re embedding:

function search(term, lastsearch) {
  try { if(top.location.href != window.location.href) { return; } }
  catch(e) { return; }

    var frames = document.getElementsByTagName("iframe");
    for(var i = 0, len = frames.length; i < len; i++) {
        var frame = frames[i];
        frame.src = encodeURIComponent(frame.src.replace('='+lastsearch,'='+term));
    }
}

-or-

Optimization

Of all the stuff I've done, this is definitely NOT production-ready! Use with caution, as this was just a quick little experiment on iFrame resizing more than anything. You could optimize this by performing some pre-loading, or, perhaps hiding some iFrames until a user hovers over a particular content category, and show maybe only one iFrame as an example of each. That way you would only initially load (and have the browser wait for) 4 external sites. That's still pretty brutal (relying on the transfer speeds of more than one external site at a given time is a BAD idea), so you could further improve this by doing server-side retrieval of the external sites and then pre-load them for retrieval from your server cache as well.

Other Tools

For anything other than tinkering around, I would not suggest loading content into a non-scrollable iFrame.This is really just a fun little demo. For mroe serious uses of iFrame, I would consider a user-controllable (and thus more user-friendly) click-activated pop-up generator that supports iFrame content and a full-screen view with scrolling.

My favorite tool for automatically handling dynamic full-screen iFrame generation is without a doubt GreyBox, by Orangoo Labs.

Conclusion

That's all, but remember, as mentioned above... DO NOT TRY THIS AT HOME! (Unless you plan to do something about pre-loading the content and better styling the iFrames for a reliable, controllable, cross-browser friendly experience that works at multiple resolutions on multiple devices, i.e. Mobile, where this little technique of mine would fail miserably for lack of a mouseover event in most Mobile browsers).

Related articles

• Tests Show PageRank Sculpting with Nofollow Still Works (seomoz.org)
• Using the Facebook Like Box iFrame code (websitedesigncapetown.wordpress.com)
• Facebook Pages Offically Killing FBML In Favor of iFrames (hubspot.com)
• Flash vulnerability allows silent activation of your webcam and mic (geek.com)
• Rocketcharts, Open-source HTML5 Financial/Statistical Charts (chasegale.com)
• Social Media and Blogging Weekly Round-up {10.22.11} (savvyblogging.net)
• A World of Insights - Google Analytics and Facebook Tabs (bruceclay.com.au)
• Page Tabs Become Facebook's Fastest Growing (allfacebook.com)
• 7 Troubleshooting Tips for When Your Custom Facebook Iframes Page Won't Display (kimwoodbridge.com)
• Story about Blue E, iFramed Web Application, Wastage of 6 hours, Missed Lunch and what not! (hasin.wordpress.com)