Squashing Borders on Dynamic iframes

September 19th, 2006CSS, JavaScript

Ah, the iframe. So we meet again. How is it that you’ve managed to survive for so long? Hiding underground for what seems like ages at a time, then suddenly uncoiling to reveal yourself and striking the unsuspecting Web developer from out of nowhere?

I’m in the middle of a project right now that, for various reasons, requires one of these little beasties for displaying some remote pages. The iframe itself is dynamically generated via JavaScript using document.createElement. No trouble there. Straightforward enough.

What wasn’t so simple was getting it to display as intended. You can use CSS to cover almost all the bases with iframe except that butt-ugly border certain browsers find it necessary to add no matter what styles you apply (cough, cough—Internet Explorer—cough, cough). The only surefire way around this is to set frameborder="0" on the iframe element itself. Presentational attributes in the markup. Ugh. Oh well, can’t win them all, right?

From here I chopped everything up into the appropriate createElement and setAttribute bits in JavaScript and set up a function that creates the whole thing when called. Bring up the test page, hit refresh, and…

The borders are back.

“What the—?!”

But only in Internet Explorer.

Sigh.

After what seemed like an interminable amount of time spent fiddling (poking Explorer with a sharp stick) and researching (Googling every variant of “stupid iframe borders in JavaScript” I could think of) I finally lucked out and hit upon this blog entry at FlashApe. Turns out that for some mysterious reason IE will only get this right if you use camel case for the attribute name value in your JavaScript.

So if you don’t want borders popping up on your dynamically generated iframe in IE, the JavaScript should look something like this (note the capital “B” in frameBorder):


var foo = document.createElement("iframe");
foo.setAttribute("src", "bar.html");
foo.setAttribute("frameBorder", "0");

All this despite the fact that the very same attribute is all lower case when in it’s in the markup.

Sure. Makes perfect sense to me.

Comments

Geoff February 7th, 2007 at 1:27 pm

Thank you so much for writing this. I just spent the past 2 hours trying to figure out this border issue. All because of an uppercase B.

David Sleight February 9th, 2007 at 12:05 am

You’re welcome! Glad to help.

Bart Peremans April 13th, 2007 at 2:51 pm

Thanks to help me out with the uppercase ‘B’. It’s also good to know when you append the iframe to another element, that the frameBorder must be set before you doing for some strange raison! Element.appendChild(iframe);

nick July 2nd, 2007 at 2:53 pm

geez. thank you so much. i was about to pull my hair out over this.

i kept adding random declarations like cellspacing and vspace and crap.

camel case. never crossed my mind.

thanks for this.

Guilherme August 9th, 2007 at 1:09 pm

wow! I was searching for this solution, opened various tabs in FF with the google results, and I just closed the flashApe tab, and got myself here.

I have to say I just love the iFrames. they’re exaclty like you said, little things that managed to survive in the underground of html since ever…

I always wondered why people just dont use it that much? I mean they’re so helpful. developers rippng hair outta heads with innerHTML’s and workarounds… when ou shy ifriend, I mean iframe, has always been there for us, just waiting the call.

Ive been ever afraid they someday decided to delete the iframe from existence. But here he is, finally showing his face, finnally being recognized.

I never had an iPod, an iMac nor an iPhone. But damn Im using the iFrame since ever and I’ll never abandon it!

GO FRAMIE!

Guilherme August 9th, 2007 at 5:11 pm

Hi, after I wrote my comment here, I was inspired by your post to post something myself in my blog. I did some quotations of this post of yours, (all correctly sourced and linked back here). If you’d like to read it, its my website link. thanx.

Chuck September 18th, 2007 at 2:14 am

Oh my GOSH. This drove me absolute nuts. Typing so many javascriptlets into my URL bar to dynamically create iframes in every way possible…

This is definitely going into my archive of IE quirks. Even in 7!

Can’t thank you enough!

ledatica October 2nd, 2007 at 6:09 am

I was fiddling around with the same border issue. I kept using border=0, etc. etc - no good. Thank you for finding this solution.

May be all us should start pushing for all browsers to be uniform in their interpretation of code and only add features that does not affect how the browser displays data.

email Microsoft, Mozilla, opera and safari to begin.

Leave a Comment

E-mail address will not be displayed. You can use <a href>, <blockquote>, <code>, <em> and <strong> tags in your comment. Line breaks are automatically converted.

Recent Posts

Search