11

I am trying to insert an iframe into the browser DOM via javascript and want to remove the border if IE but can't seem to. I have tried these to no avail:

iframeElement.style.borderStyle="none";

and 

iframeElement.style.frameBorder = "0";

Any suggestions will be much appreciated.

Tim Down
  • 318,141
  • 75
  • 454
  • 536
  • +1, had the same problem, Tim's answer was perfect. Title needs an edit, by the way: jav*s*ascript. Would do it if I could. – Pedro Sep 30 '10 at 16:03
  • [This][1] seems to work for IE8, (IE is such a pain!!) [1]: http://stackoverflow.com/questions/12414525/how-to-get-rid-of-border-for-an-iframe-in-ie8 –  Dec 10 '13 at 07:58

5 Answers5

22

Bizarrely, I was looking for an answer to this very issue myself earlier today. I found that setting the frameBorder to 0 property does work, so long as you do it before the iframe is added to the document.

var iframe = document.createElement("iframe");
iframe.frameBorder = 0;
document.body.appendChild(iframe);
Tim Down
  • 318,141
  • 75
  • 454
  • 536
  • +1 very interesting. IE8 still have the same problem, can you belive this!? Adding frameBorder inline makes the document not to validate anymore for HTML 5 so the only trcik is to add it via JS as you suggest. – Marco Demaio Aug 23 '10 at 20:23
6

The frameBorder attribute exists directly on the iframe element, is not a CSS property.

Try with:

iframeElement.frameBorder = 0;
Christian C. Salvadó
  • 807,428
  • 183
  • 922
  • 838
  • Gah, I've downvoted this, done some more research and realised this answer isn't entirely wrong (see my answer for clarification) but apparently cannot remove my downvote unless this answer is edited. Sorry. – Tim Down Oct 04 '09 at 22:38
  • @Tim: Don't worry, edited in case you want to remove your downvote, I added a link to the frameBorder attribute on the DOM Core Level 2 specification... – Christian C. Salvadó Oct 05 '09 at 00:55
3

Try this. It will find any iframe elements and remove their borders in IE and other browsers (though you can just set a CSS style of "border : none;" in non-IE browsers instead of using JavaScript). AND it will work even if used AFTER the iframe is generated and in place in the document (e.g. iframes that are added in plain HTML and not JavaScript)!

This appears to work because IE creates the border, not on the iframe element as you'd expect, but on the CONTENT of the iframe--after the iframe is created in the BOM. ($@&*#@!!! IE!!!)

Note: The IE part will only work (of course) if the parent window and iframe are from the SAME origin (same domain, port, protocol etc.). Otherwise the script will get "access denied" errors in the IE error console. If that happens, your only option is to set it before it is generated, as others have noted, or use the non-standard frameBorder="0" attribute. (or just let IE look fugly--my current favorite option ;) )

Took me MANY hours of working to the point of despair to figure this out...

Enjoy. :)

// =========================================================================
// Remove borders on iFrames

if (window.document.getElementsByTagName("iframe"))
   {
      var iFrameElements = window.document.getElementsByTagName("iframe");
      for (var i = 0; i < iFrameElements.length; i++)
         {
            iFrameElements[i].frameBorder="0";   //  For other browsers.
            iFrameElements[i].setAttribute("frameBorder", "0");   //  For other browsers (just a backup for the above).
            iFrameElements[i].contentWindow.document.body.style.border="none";   //  For IE.
         }
   }
FirstFraktal
  • 358
  • 4
  • 6
0

Try iframeElement.style.borderCollapse = 1; or iframeElement.style.borderWidth = 0;

Anatoliy
  • 29,485
  • 5
  • 46
  • 45
0

You should also be able to use 'conditional comments' in the HTML so as to include the 'frameborder' attribute only in IE8:

 <!--[if IE 8]>
 <iframe id="my-iframe" frameborder="0"></iframe>
 <![endif-->
 <!--[if gt IE 8]><!-->
 <iframe id="my-iframe"></iframe>
 <!--<![endif]-->
moloko
  • 423
  • 4
  • 8