How to dynamically adjust an iframe’s height

Why are we using iframes? I thought they were evil.

When my wife tried to log into GMail in IE the past two days it gives her a bizarro’ error. After spending half an hour trying to fix it, I instead switched gears and spent the next half an hour convincing her to switch to FireFox.

I will need all of your prayers on this one, (the religion does not matter), as her switching to Firefox could save me many hours of work each year.

Also Matt if you are able to comment. I once heard a rumor at Web Master World from someone that google does not like frames.

Does the Googlebot crawl inside an iframe?

Thanks!
dk

Matt, you read my mind! I’ve got an online shop front I’ll be opening in the next few weeks that uses another site for order processing. I planned on sticking their site within an iframe of my site for handling orders, and this will be perfect for making the design flow with the height of the iframe. Thanks!

Boo, hiss. iFrames are evil! Unless. . . you are telling us they aren’t evil. Now THAT would be some big news. SEOs would probably talk about it relentlessly the rest of the month.

Brent D. Payne

Please note! This will only work if parent and child frame are on the same domain. I don’t think there is a way to do this with different domains without massively changing browser options.

How about div tags?? why cant we use one div inside the another div?

i use IE to test the page, the iframe do not have any change when i resize the parent frame.

[quote]Otherwise the JavaScript code throws an exception: “Permission denied to get property HTMLDocument.body”[/quote]

In this case you could use “scrollable” divs instead of iframes.

Nice, but I wish there was something for a IFraming a different domain.

sorry that was <font> tag

Rip on your code? Why, looks good, it works, ship it!
One thing I might add though is that the iframe content MIGHT not be known at parent window load time. But if the content of the iframe is small and server response is good, it usually isn’t a problem. Also, that works well the first time an iframe is loaded and loaded on parent load but if it is switched at some point, the iframe won’t resize. But, that shouldn’t happen unless someone is foolish enough to use iframes for navigation! )

But, if late loading does become a problem, the way around it is to put the iframe content size detection in an onload in the iframe content and then have that call the parent’s resize bit. Of course the problem with that is then the parent is dependent on the child supporting it although tests for it, and from the iframe side, can easily be made for a more bombproof implementation.

One problem I see though that might be more serious, whether to use document.body or document.documentElement depends on whether a doctype is used or not so I think that your code could use some further bombproofing.

As for “standards” seemingly not being standard, it used to get on my nerves too when I’d get a killer layout or script working in one browser only to find it totally borked in another and IE is NOT the only problem.

But, over the years I have found that after getting something working across “all” browsers, I always ended up with a more solid implementation and now after learning most of the workarounds, or things to avoid in some cases, that various browsers need to get it to look the way I want, doing things in a cross browser fashion from the beginning has almost become second nature.

I definitely enjoyed your getting “down and dirty” with the code jockeys amongst us and hope you do more as you have time and opportunity.

I should have read the other comments before commenting myself…

Dr. David Klein, if Google is given clear links to the content in the iframe, either through the iframe’s src attribute or through navigation in the parent which uses the target attribute, Google has no problems crawling the contents of iframes.

But, a site using iFrames for navigation will have problems because the contents of the iframes essentially becomes a PageRank black hole. On a normal page, one would have site and content navigation on each “page” but if the contents of the page is iframed and the navigation is in the parent, the iframe content would have to duplicate the navigation of the parent for PageRank to flow from that page back to the rest of the site and that would get ugly fast.

Add to that, someone trying to link to iframed content has to know what they are doing to get the link to the actual content they want to link to and not just the URL of the parent. If they don’t get it right, that page loses the link love it might have gotten and ends up with a lesser amount.

Add to that, if someone does link to the contents directly, what happens when someone follows that link or Google indexes that page? Unless one takes measures to prevent it, usually using Javascript, one following a link to iframed content will end up at the content with no support site frame around it.

Add to that, problems with bookmarking and it gets more depressing.

Personally, I’ve found it easier to make an AJAX navigated site more user and search engine friendly than an iframe navigated site.

Of course there are those who would ask the obvious question, “Why do either?” But sometimes one has to do what one has to do.

Matt – Thanks, I am trying to do iframes on my website(s) as a form of compliant crosslinking while at the same time displaying my product(s) in the sidebars. I noticed Google throwing the beatdown on crosslinks in my blog sidebars that appeared sitewide so an iframe appeared to be a solution, correct? You know my website Matt (where I sell my product), take a look if you like. I will send you the link of my other related site where I have it linked in an iframe on the sidebar, is it compliant?

Can you talk a bit about “iframes and crosslinking” we really need a solution out here, I want to show my product on related sites but only want to pass one link credit or none at all/if not related with a nofollow from the sidebar, thinking too much?

Thanks will cut and paste/test your code later, was annoyed with that scrollbar in IE, so very ugly…

One more: It gets a little sad out here as a webmaster when you do things that might be seen as spamming search engines, 99% of the time this is not the intent, there is just no information anywhere on this stuff and I am still not sure I am not breaking any algorithmic rules…grrr.

Got to run, 12 inches of fresh snow to shovel in the north east, weee!!

font tags and bgcolor attributes, oh my!

No meta descriptions? I suppose these are not for Google’s index, nor its SERPs?

i-frames? I thought i-frames were a large no-no for optimization and user accessability?

i personally really dislike the use of i-frames, especially when they have scrollbars….i-frames in my opinion should be a last resort solution when developing a user interface.

I look forward to other opinions on i-framing here….but from a majority of colleagues of mine, i-framing = bad idea

Good Idea, the div + css design can dynamically adjust an iframe’s height too.

Cross-browser compatibility: The bane of web designers. Why CAN’T they standardize???

And Matt, thanks for your help a while back with my site, you helped fix things right up, whether through your advice or attention.

Vic

In defense of iframes, I find them to be very useful, want a few examples?

Say I do a book review and want to link over to Amazon.com to earn a few pennies, you can insert an iframe widget directly in the content with an image of the book, price, sale price ect. This allows you to not clutter your content with over-monetization and is VERY search engine compliant.

The same goes for placing items you sell on multiple sites without suffering the wrath of excessive crosslinking in Google.

Iframes are the future, I am using them today!

Come on guys, iFrames have their place sometimes.

Here are two sites (disclaimer: my own sites) using iFrames to do what you otherwise could not:

http://webwait.com – measures web page load times by checking how long it takes to load in an embedded iFrame.
http://weborandom.com – shows random web pages in iFrames that you can navigate through

As the sites are external, though, it’s unfortunately not possible to use Matt’s hacks due to the browsers’ cross-site security model. I had an idea for a site a while ago (which would have served an extremely useful purpose), but played around with many options, and it was apparently impossible by any means for the outer frame to discover the height of the inner frame’s body, if they come from different domains.

I find it amusing that frames are being discussed and there are discussions about the wrong things. Saying iframes are evil is silly. Ajax is good?

Please.

http://en.wikipedia.org/wiki/Anthropomorphism

No amount of what you technically will ever save you if what you are saying is not useful or relevant. Personally I rarely visit here because I do not spam search engines and Matt you are after all the head of the Web Spam team.

I’ve said enough.

Waitwaitwaitwaitwaitwaitwait…there’s something much more important going on here that no one’s talking about: Matt is getting his web design freak on! GETCHU SOME!

This is going to be really interesting…how long before Matt turns the tables and starts asking the rest of us a million questions? He’s got some chits coming.

Seriously, dude, what’s the not-for-profit?

First of all the protocall you would want to use to achieve Matts desired outcome would be AHAH (Asynchronous Html And Http) not AJAX (Asynchronous Javascript And XML). AHAH allows you to dynamically grab html from another url and combine them together into a single document. The new document can now be formatted using a standard css.

Here is an example of AHAHLIB.js

function callAHAH(url, pageElement, callMessage) {
document.getElementById(pageElement)
.innerHTML = callMessage;
try {
req = new XMLHttpRequest(); /* e.g. Firefox */
} catch(e) {
try {
req = new ActiveXObject(“Msxml2.XMLHTTP”);
/* some versions IE */
} catch (e) {
try {
req = new ActiveXObject(“Microsoft.XMLHTTP”);
/* some versions IE */
} catch (E) {
req = false;
}
}
}
req.onreadystatechange
➥ = function() {responseAHAH(pageElement);};
req.open(“GET”,url,true);
req.send(null);
}
function responseAHAH(pageElement) {
var output = ‘’;
if(req.readyState == 4) {
if(req.status == 200) {
output = req.responseText;
document.getElementById(pageElement)
.innerHTML = output;
}
}
}

once the data has been returned standard DOM methods can be utilized to insert the response into the document object of choice and a css can assign formatting to it.

Just an idea. Hope it helps.

thanks for the tip, I was actually having some issues with similar code, and this fixed it

Hello Matt,

Thanks for the tip, I was searching for this for very long time I could not get rid of either the huge space below the content of my page either the ugly scroll down bar…

Now the big mystery… is iframe content crawled by Google?

cross-domain auto-sizing iFrame solution:

(requires ability to put script into remote page)
http://www.surveygizmo.com/forum?forum=3&topic=836

saved certain minutes matty

First of all, a big thanks for your time and sharing.

I’ve tried to use your original code, but i had two small problems:

one, i did not want to use body onload.

second, it worked fine while retriving the first page. But if i linked from the framed page to another, smaller one, the height remained the same.

Well, some reserching and i’ve came up with this:

// Firefox worked fine. Internet Explorer shows scrollbar because of frameborder
function resizeFrame(f) {
var s;
s = 100;
f.style.height = s;
s = f.contentWindow.document.body.scrollHeight + “px”;
f.style.height = s;
}

a) putting the onload to the iframe, the iframe re-configures the height everytime the iframe loads. Also, b) putting the f.style.height to change twice, the iframe has always the correct height, even if i go from a bigger to a smaller linked page.

It works for me in ie v7, ff v3.0.7 and Chrome.

Hope it comes in handy,

Thanks again for sharing,
Giannis.

Retro Iframes well sometimes its saves time ….