I-Frame Shims or How I Learned to Stop Worrying and Love the Bomb
This article is old and may contain information that is outdated, irrelevant, or—dare I say it—no longer accurate. Read with care!
So again, I show up late to the party. IE7 is already out, but my target customers are still using IE6. So today, boys and girls, we’re going to discover the magical world of using I-Frame shims to hide those bleeding heart select boxes from showing through our layered elements.
Typically, when creating an I-Frame shim, you’re going to create the i-frame dynamically using document.createElement. Let’s start out with some successful code.
var iframeShim = document.createElement( 'iframe' );
iframeShim.setAttribute( 'frameBorder', '0' );
Now for some caveats you might have encountered with code not matching the above:
I-Frame frameBorder attribute
Are you trying to get rid of that nasty i-frame border in Internet Explorer 6 (IE6)? Tried CSS properties? Tried setting the frameBorder attribute? It turns out that when setting the frameBorder attribute, the name of the attribute is case sensitive. Using frameborder will not work correctly, but using frameBorder (with a capital B) will give the desired result. [Source: FlashApe]
HTTPS and I-Frame src attribute
Is your page hosted on a secure domain (https instead of just http)? Is the dynamically created iframe causing the following error message in Internet Explorer?
This page contains both secure and nonsecure items. Do you want to display the nonsecure items?
Update Again: I have revisited this problem and it looks like (as mentioned in the comments) there is a problem with the solution presented in the first update (infinite load). After researching some DOMContentLoaded solutions, I thought to try the “//:” source they were attempting for their deferred script source. Alas, it didn’t work. However,