Implementing iFrame Toolbar

July 28, 2009

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

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

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

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;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

Bookmark and Share
Share and Enjoy:
  • Digg
  • del.icio.us
  • Facebook
  • Google Bookmarks
  • E-mail this story to a friend!
  • FriendFeed
  • LinkedIn
  • StumbleUpon
  • Twitter

tags: , , , , ,
posted in Blog by Amir Harel

46 Comments to "Implementing iFrame Toolbar"

  1. Jon Tuttle wrote:

    Great tutorial, been looking for something like this. The only thing that would keep me from using this (cause I did get it to work) is the url length. I would love to see a way to convert those links into its own short url similar to digg automatically.
    example http://www.amirharel.com/olknjfsdoi

  2. Amir Harel wrote:

    Hi Jon, Thanks.

    In order to use short URLs you can either implement such a service on your own or use an existing service.
    If you want to host a short URL service you can check out these open source solutions:
    * http://yourls.org/
    * http://www.sean-o.com/blog/index.php/2009/08/11…

    If you don't want to host your own servce and would like to use existing on, i recommend to checkout bit.ly API: http://code.google.com/p/bitly-api/wiki/ApiDocu…
    This will allow you to create short URLs using an API and to get all the tracking information of bit.ly – which is great.

    and most importantly – Telescreen is awesome listening over and over to “Exit” great stuff.

    Regards,
    Amir

  3. Ross wrote:

    Is it just me, or does this not work at all in Internet Explorer (tried in both 7 & 8).

  4. Pre wrote:

    Question, but what if you are not using this toolbar and you just want to use this script for you own content that needs to be loaded from another page on the site. What do we need to replace with what?

  5. Amir Harel wrote:

    Not sure i understood your question.

  6. xperiax1keyboardhater wrote:

    Brilliant piece of coding this. I found this very useful. Not using all of the functionality, as I just wanted to be able to resize an iframe to the content and keep a nav bar at the top of the page (don't want any of the toolbar functionality). I tried many different snippets of code and this was the best, so thanks :-)

  7. Amir Harel wrote:

    You're welcome!
    And thanks.

  8. xperiax1keyboardhater wrote:

    Amir, great piece of work. However, I wonder if there is a way to change the URL in the address bar each time a page loads, so that the query string contains the correct iframe URL. This would be great for bookmarking and return visits. At the moment, ?iframe= the default URL contained in the js file.

    Any ideas?

  9. xperiax1keyboardhater wrote:

    Sorry, you had already answered this in the article…

    “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.”

  10. xperiax1keyboardhater wrote:

    Although perhaps the solution used in the following link might be worked into your solution for this purpose..?

    http://forums.devarticles.com/programming-tools…

  11. gene99 wrote:

    Amir I've been trying to solve this for 2 months. Thank you!

  12. gene99 wrote:

    Amir, I got the code working for a url like http://www.ebay.com & ebay.com but not http://www.ebay.com . I removed the “http://” from 2 places in the “res_iframe.js but i still won't work. My php echo includes the “http://”. What can I do? >> my > <?php echo
    $custom_1; ?> = a full url w/ “http://” Thanks
    this works fine > http://www.easysavannah.com/res_iframe.html?ifr…
    I hardcoded it though

  13. Amir Harel wrote:

    I'm no expert in php but it seems like you have some configuration issues there- the code works fine for several people who uses this code.
    Worst case, you can always enforce the removal of the http:// section in the JS side…

  14. gene99 wrote:

    Not to bother you but any idea how I can do that? I entered a url w/ out the http:// in a custom field here > http://www.easysavannah.com/moon-river-test-4.html . Click the second down “See Our Google Reviews & Map” on the middle column to the right of the “business hours”. This site is just testing codes). I don't know how to drop http:// w. js. Thanks

  15. Amir Harel wrote:

    i think this is a security issue with hostgator (are you hosting there?)
    You can read more here:
    http://stackoverflow.com/questions/1089744/403-…
    http://code.google.com/p/timthumb/issues/detail…

    good luck

  16. gene99 wrote:

    That was the problem! Yes I use HostGator. Took them 30 seconds to make the change talked about here> http://code.google.com/p/timthumb/issues/detail… Thank you so much! I owe ya :)

  17. urosh wrote:

    how to put on this site? I tried a few variations, but we should not go, I think where you put in folders, how to call after the iframe and similar things.
    Please help me, I can not cope and I'm bad at these things

    Sorry for my bad English

  18. Amir Harel wrote:

    I'm not sure i understood your question… what are you trying to do?

  19. Rolle wrote:

    Cool! Thanks, it works like it should!
    Now I just have to rewrite it a bit to make it into a side bar (instead of top bar)… :)

  20. jdog2004 wrote:

    Does anyone have an example of res_iframe.js. I copy the code in the example but get an error.

  21. Kumar wrote:

    Hi Amir Harel,I use blogger.how to add this code to blogger.in which place the code will be pasted in static page or in post.please help me. i want to use this in blogger

  22. rgarzamarcos wrote:

    wow amir! i`ve been activelly looking for something like this for a log time and you've made it really simple! thanks a lot i just have one quiestion how do you implement a adsense or adsense like code in the frame along with what you already have there; each time i try i just end up adding an extra frame with the target displayed twice

  23. erik m. wrote:

    This is just the thing I have been looking for. One question, if I were to have a search box on one html or php page that I wanted to send the results to the iframe on a page like the one in your demo, how would I set up the form on the first page? I would be sending a third party site to the iframe on page two as compared to a local html or php document.

  24. Amir Harel wrote:

    I'm not sure i understood your question. you want to be able to post data to a third party web site and display the result on the iframe window?
    If you can avoid the POST method and use GET, it would be much easier – this is what i did in my demo. If you must POST data to the server you can set the target to the ifrmae so the result data will be displayed there.

  25. Amir Harel wrote:

    How do you want to use this in Blogger? do you want to have the iframe toolbar on top and the blog on bottom?
    If thats the case then you need to host the code of the toolbar somewhere else and point the iframe to blogger.

  26. Kumar wrote:

    Hi amir Harel,Thank you for your reply,i want to use this in the top of the blog.

  27. Erik M. wrote:

    Basically, I would like to have a form on page A. where the user would enter a keyword and select a site from a drop down list. The results from the selected website would be sent to an iframe on page be that has the cool tool bar at the top. It's kind of like when you do a google image search and click on one of the pictures in the search results and it opens the image on a new page with a google tool bar at the top. The only difference is that I would not be placing a link on Page A. instead the user would enter a keyword and my php script would attach that keyword to the selected websites search url format and then the results would be sent to an iframe on page B.

    I guess to simplify things I am wondering how to take the form in the demo tool bar you made and place a copy of it on a new page. When someone types in a keyword and hits submit on this new page the results are shown in the iframe of the page used in this demo (with the tool bar on it).

  28. Mr Chris wrote:

    Great job Amir. I am using this without all the toolbar functionality to handle displaying an iframe at 100% height. I have been able to mostly pull it off, but have a couple questions to finish the job:

    1) I can get the initial iframe to resize 100% height. However, when someone clicks a link in that iframe and goes to a subpage within the iframe content – I need to trigger another iframe resize, as the subpage is always greater in height. I am assuming this would be done in the registerEvents section. If so, what would the code look like?

    2) I am experiencing a difference in height in IE -vs- FF. in IE, the iframe resize height works great, but in FF, I have had to add 300 to the height in order for it to display the bottom of the iframe content. which leaves me with a ton of whitespace in IE now. Here is what I did. (remember I am not using the toolbar) $(“#iframe”).height( WindowHeight() + 300 );

    Thanks in advance!

  29. Dennis Short wrote:

    Dude, you rock. Question: some sites kill the toolbar. For example:
    http://www.amirharel.com/labs/it/res_iframe.htm…

    Do you know how to circumvent their blocking you from iframing their sites?

  30. Amir Harel wrote:

    Hi Dennis,
    There is a way to break the frame in Javascript, and it goes something like this:
    if (top.location != location) {
    top.location.href = document.location.href ;
    }

    I guess this site is implementing something similar

    Amir

  31. Dennis Short wrote:

    Thanks Amir, so I guess there's no way to override that. Maybe I can detect that code on the page somehow and spawn a popup with my toolbar stuff instead?

  32. Amir Harel wrote:

    You don't have access to the iframe code so you can't enforce that.

  33. Amir Harel wrote:

    Hi Dennis,
    There is a way to break the frame in Javascript, and it goes something like this:
    if (top.location != location) {
    top.location.href = document.location.href ;
    }

    I guess this site is implementing something similar

    Amir

  34. Anish Bansal wrote:

    Great. It works like a charm. You saved me man!!

  35. AU wrote:

    Great tutorial! It's working for me. Before I dive into the code, how would I implement a second iframe as a footer that has this functionality.

    Thanks!

  36. AU wrote:

    Rolle, were you able to get the side bar working?

  37. Moe Syzlak wrote:

    Great post. I noticed as soon as I add a DOCTYPE delcaration the iframe breaks. Any workaround for this?

  38. ROY wrote:


    CheapTabletsOnline.com. Canadian Health&Care.Best quality drugs.No prescription online pharmacy.Special Internet Prices. Online Pharmacy. Buy drugs online

    Buy:Prednisolone.Actos.Synthroid.Retin-A.Mega Hoodia.100% Pure Okinawan Coral Calcium.Prevacid.Arimidex.Petcam (Metacam) Oral Suspension.Valtrex.Human Growth Hormone.Accutane.Zyban.Lumigan.Zovirax.Nexium….

  39. Marmaris Hotels Turkey wrote:

    this is too advance for me, i cant seem to find an answer on how to resize an iframe

  40. kumar87 wrote:

    Hi amir,
    i add this tool for my blog. but i have a problem in that.
    whenever i'm using http:// infront of demo blog url, it shows a error. how to solve this.

    Thank you

  41. Kumar wrote:

    Hi amir,
    i add this tool for my blog. but i have a problem in that.
    whenever i'm using http:// infront of demo blog url, it shows a error. how to solve this.

    Thank you

  42. Guest wrote:

    How do you put this toolbar at the bottom?

  43. CHRISTIAN wrote:


    NEW FASHION store. Original designers collection at low prices!!! 20 % TO 70 % OFF. END OF SEASON SALE!!!

    BUY FASHION. TOP BRANDS: GUCCI, DOLCE&GABBANA, BURBERRY, DIESEL, ICEBERG, ROBERTO CAVALLI, EMPORIO ARMANI, VERSACE…

  44. pedro wrote:

    Hi. You can avoid the break by using the onbeforeunload event from the BODY tag.

    For example:

    That way, every time that a site wants to navigate away, the user would be notified and able to choose to stay

  45. pedro wrote:

    Hi. You can avoid the break by using the onbeforeunload event from the BODY tag.

    For example:

    That way, every time that a site wants to navigate away, the user would be notified and able to choose to stay

  46. Aleksey Yaremenko wrote:

    A small typo in  ”WindowHeight” function, “& amp” repeats six times

 
Powered by Wordpress and MySQL. Theme by openark.org