Client side development is my passion, I breath and eat JavaScript. Combining my business and marketing experience with my development skills allows me to help individuals and businesses to maximize their development projects. 
Problog
this post covers the following topics:
- definition and usage of iFrame toolbars
- The 100% height bug for iframe tag
- Using an auto-resize for an iframe
- writing an iframe toolbar demo
Lately i see more and more web sites using the iframe toolbar technique. This technique allows a web site to present content from a different site using an iframe element <iframe>, while still having a small part of the browser displaying a small toolbar at the top. This toolbar allows the site to interact with its users while they consume external content.
There are several usage for this technique. These are the main ones that i encountered:
Social Networks
Using the toolbar, social network sites can provide interaction and content to their users while they browse to external links outside of their site. I think most of the big social networks, like digg, linkedin and facebook have implemented this technique into their sites.
Social Networks using iframe toolbar
Search Engines
The iframe toolbar is commonly used in image search engines, where clicking on an image search result opens the original site of the image within the search engine page. This technique allows the search engine to increase interaction and minimize traffic lost.
Search engines using iframe toolbar
Redirect Services
Redirect services, or should i use their sexy name -url shortners – are also a valid market for using the iframe toolbar technique. Usually when such a service implements this technique it allows its users to perform social interaction with the url it redirected (like tweet it, or share it on facebook). The ow.ly service is a good example of such implementation
ow.ly using iframe toolbar
When i thought how it’s being implemented, i automatically thought about the most simple solution: setting a page with a header div and an iframe tag that has height:100%. Unfortunately, it doesn’t work that way – apparently there is some bug with the 100% height. Since this technique is becoming so popular i thought it might be interesting to share how its being implemented.
iFrame Toolbar – The Problem
As i mentioned above, setting the height of the iframe to 100% in the css is not going to work. i searched a bit and found that its a well know bug. I oreder to demonstrate how the workaround works i decided to implement a demo toolbar that implements the following functionalities:
- The toolbar page will get the url for the iframe as a parameter (www.mytoolbar.com/?iframe=URL)
- Will allow the user to tweet about the url
- will allow the user to search Google
- Provide a back link
- Will allow the user to close the toolbar and to load the iframe as the main page
- will allow the user to expand the toolbar to get more functionality and content
You can see and play with the toolbar in this demo page.
Now lets see how its really works.
iFrame Toolbar – The HTML
There is nothing interesting here that i think worth talking about. Basically, i divided the screen into two sections (divs): one is the toolbar and the other is for the iframe. Off course the elements inside the toolbar div can be changed according to each need.
<body> <div id='toolbar'> <div id='search'> <input id='qs' type='text' size='35' ></input> <input type='button' value='search' id='searchBtn' ></input> </div> <div id='main'> <div id='links'> <a id='back' href='javascript:void(0);'>Go back</a> <a id='twitter' href='javascript:void(0);'></a> <a id='arrow' href='javascript:void(0);'></a> <a id='close' href='javascript:void(0);'></a> </div> <div id='extra'> <br> Is that alright? Give my gun away when it's loaded <br> Is that alright? If you don't shoot it how am I supposed to hold it <br> Is that alright? Give my gun away when it's loaded <br> Is that alright With you? </div> </div> </div> <div id='iframe'> <iframe src='' /> </div> </body>
iFrame Toolbar – The CSS
As in the HTML section, there is no exciting code to report here as well. Anyone can (and from looking at my design skills – MUST) change the css to match it to their own design and look-and-feel. However, i think its important to mention the followings:
- The following deceration – html {overflow: hidden;} – is important since we don’t need the scrollbars in our toolbar page, and it also fixes an IE bug, wher it displays the scrollbars even when they are not being used in a disabled mode.
- Since in my example i allow the user to expand the toolabr i aslo declared the toolbar div to hide the content in case of an overflow.
- Though its not working, i set the iframe and the div tag’s height to 100% – just as an decleration of what i expect of it to do (optemistic coder…)
html {overflow: hidden;} /*we don't need any scrolls for our html */
#toolbar
{
background: url(bck.png) repeat-x transparent;
height: 25px;
overflow: hidden;
}
...
#iframe { overflow: hidden;} /*this is to remove the scroll when not needed*/
#iframe, iframe
{
width: 100%;
height: 100%;
}
iFrame Toolbar – The JavaScript
For my own convinience i used jquery in my code, although for this demo its not neccessary and even considered an overload to such a project. I’ll go over the most important functions that hadle the iframe resizing, while i’ll leave you to read the other non-related code – which i think are self-explanatory.
main
This function extract the url parameter from the page url using the getIframeURL function. Then it register to some UI events and finnaly i call the most important function: resizeIframe()
$(document).ready(main);
function main()
{
$('iframe').attr('src', getIframeUrl() );
registerEvents();
resizeIframe();
}
function getIframeUrl()
{
var url = window.location.href;
var iframe_url = 'http://www.nowaythatthereissomethinghere.com';
var param_start = url.indexOf("iframe=");
if( param_start != -1 )
iframe_url = url.substr(param_start+7,url.length-param_start-7);
if( iframe_url.indexOf("http://") == -1)
iframe_url = "http://" + iframe_url;
return iframe_url;
}
resizeIframe
In order to solve the 100% height bug i’m going to calculate the exact height that i need to set teh iframe. to do so, i’ll use the following logic:
iframe height = window height – toolbar height
I know its not obvious from its name but the windowHeight function return the height of the window (wow, you didn’t expect that, didn’t you?), while the getObjectHeight returns the height of the object its gets as a parameter. So if we subtract the second function from the first we get the height of the iframe.
function resizeIframe()
{
$("#iframe").height( WindowHeight() - getObjHeight(document.getElementById("toolbar")) );
}
function WindowHeight()
{
var de = document.documentElement;
return self.innerHeight ||
(de &amp;amp;&amp;amp; de.clientHeight ) ||
document.body.clientHeight;
}
function getObjHeight(obj)
{
if( obj.offsetWidth )
{
return obj.offsetHeight;
}
return obj.clientHeight;
}
Since we need the iframe height to be calculated every time the window size is changed, we also need to register to the window resize event as so:
$(window).resize( function() {resizeIframe();} );
That’s it, that’s all there is to it. All the rest of the code is to handle the UI functionality that i decided to implement for this demo toolbar. just want to clear some points:
- Due to security reasons the browser prevent access from reading an iframe source url, so if the user has clicked a few links in the ifrmae, there is no way to find out which page is being displayed in the iframe.
- I used the jquery animation method in order to expand and collapse the toolbar.
You can see and play with the toolbar in this demo page. if you want to change the iframe url, just change the iframe parameter to whatever you want, like so: http://www.amirharel.com/labs/it/res_iframe.html?iframe=YOUR URL
