iframes and HTML5 templates have significant hurdles with older Internet Explorer versions. For Internet Explorer 8 and older, the frameBorder and scrolling attributes must be set on the iframe as the equivalent CSS properties cannot accomplish the same thing. Unfortunately, these properties are not valid in HTML5.

To make matters worse, changes to the frameBorder attribute have no effect once the tag has been parsed (or added to the DOM for dynamic elements). So the typical workaround of adding the non-compliant attributes through script won’t work either. Today I finally came up with a workaround for this issue and was able to have my standards compliant iframe tag and make it work in older Internet Explorer versions:

<iframe id="MyIframe" name="MyIframe" src="http://my.iframe.src/"></iframe>
<script>
if(document.attachEvent) {
  var OldIframe = document.getElementById("MyIframe");
  var NewIframe = OldIframe.cloneNode(true);
  //no scrollbars - overflow:hidden works for other browsers
  NewIframe.setAttribute("scrolling", "no");
  // IE8 and lower add a special border on frames.
  // It's actually in addition to the css border property.
  if(!document.addEventListener) {
    NewIframe.setAttribute("frameBorder", 0);
  }
  OldIframe.parentNode.replaceChild(NewIframe, OldIframe);
}
</script>

All I’m doing is making a copy of the iframe, setting the new attributes, and replacing the original iframe in the DOM with my new one. The document.addEventListener check will succeed on almost any modern browser and is an effective way to target IE8 and older (although there are numerous other and more exact ways to do this).

And now I have my standards compliant iframe tag and have it work in Internet Explorer 7 and 8.

Update 5/24/2011: After more testing it appears IE9 also requires similar treatment to remove scrollbars. The code sample above has been updated.