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
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
Link | August 23rd, 2009 at 8:13 pm
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
Link | August 24th, 2009 at 2:00 am
Is it just me, or does this not work at all in Internet Explorer (tried in both 7 & 8).
Link | September 29th, 2009 at 8:12 pm
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?
Link | October 19th, 2009 at 12:42 am
Not sure i understood your question.
Link | October 20th, 2009 at 3:00 am
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 :-)
Link | December 4th, 2009 at 8:34 am
You're welcome!
And thanks.
Link | December 5th, 2009 at 11:43 am
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?
Link | December 11th, 2009 at 3:20 am
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.”
Link | December 11th, 2009 at 8:58 am
Although perhaps the solution used in the following link might be worked into your solution for this purpose..?
http://forums.devarticles.com/programming-tools…
Link | December 11th, 2009 at 9:30 am
Amir I've been trying to solve this for 2 months. Thank you!
Link | December 27th, 2009 at 1:33 pm
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
Link | December 27th, 2009 at 5:52 pm
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…
Link | December 28th, 2009 at 8:00 am
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
Link | December 28th, 2009 at 3:18 pm
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
Link | December 29th, 2009 at 1:01 pm
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 :)
Link | December 29th, 2009 at 3:43 pm
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
Link | March 27th, 2010 at 4:45 am
I'm not sure i understood your question… what are you trying to do?
Link | March 27th, 2010 at 11:50 am
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)… :)
Link | March 29th, 2010 at 2:37 am
Does anyone have an example of res_iframe.js. I copy the code in the example but get an error.
Link | May 15th, 2010 at 1:54 pm
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
Link | May 26th, 2010 at 9:37 am
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
Link | May 27th, 2010 at 8:06 am
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.
Link | June 2nd, 2010 at 6:22 pm
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.
Link | June 3rd, 2010 at 12:25 am
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.
Link | June 3rd, 2010 at 12:29 am
Hi amir Harel,Thank you for your reply,i want to use this in the top of the blog.
Link | June 3rd, 2010 at 6:59 pm
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).
Link | June 9th, 2010 at 1:37 pm
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!
Link | June 17th, 2010 at 10:54 am
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?
Link | July 10th, 2010 at 8:31 am
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
Link | July 10th, 2010 at 11:20 am
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?
Link | July 10th, 2010 at 11:24 am
You don't have access to the iframe code so you can't enforce that.
Link | July 10th, 2010 at 11:38 am
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
Link | July 10th, 2010 at 11:18 am
Great. It works like a charm. You saved me man!!
Link | July 14th, 2010 at 4:17 am
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!
Link | July 23rd, 2010 at 7:44 am
Rolle, were you able to get the side bar working?
Link | July 23rd, 2010 at 9:40 am
Great post. I noticed as soon as I add a DOCTYPE delcaration the iframe breaks. Any workaround for this?
Link | September 6th, 2010 at 1:23 pm
ROY wrote:
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….
Link | September 7th, 2010 at 2:28 pm
this is too advance for me, i cant seem to find an answer on how to resize an iframe
Link | September 9th, 2010 at 6:49 am
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
Link | September 18th, 2010 at 12:32 am
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
Link | September 18th, 2010 at 12:34 am
How do you put this toolbar at the bottom?
Link | October 1st, 2010 at 11:02 pm
CHRISTIAN wrote:
…
BUY FASHION. TOP BRANDS: GUCCI, DOLCE&GABBANA, BURBERRY, DIESEL, ICEBERG, ROBERTO CAVALLI, EMPORIO ARMANI, VERSACE…
Link | November 11th, 2010 at 12:26 am
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
Link | December 9th, 2010 at 6:35 am
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
Link | December 9th, 2010 at 1:35 pm