Zach’s ugly mug (his face)

Zach Leatherman

I-Frame Shims or How I Learned to Stop Worrying and Love the Bomb

April 24, 2007


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( 'src', 'javascript:"";' );
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?

Some have suggested that changing the src attribute to point to a blank html page with no content is the solution, but that’s an extra http request on your page that is unnecessary. Others have suggested that that changing the src attribute to javascript:false works. It does, in fact, but writes the text ‘false’ to your iframe content. Others have suggested javascript:void(0) as your src attribute value [Source: ewbi.develops], but some Internet Explorer clients still have secure and nonsecure items alert popup. I have not figured out the factors that separate these Internet Explorer clients.

Update: The correct solution is in face setting “javascript:false;document.write(“”);” as your src value, as I found in the jQuery BlockUI plugin. This is a silver bullet fix that will avoid all the problems I have encountered.

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, javascript:""; does work, so the above solution has been modified. Keep in mind, the whole point of this solution is to avoid an additional unnecessary HTTP request.

Zach’s ugly mug (his face)

Zach is a builder for the web with Netlify. He created the Eleventy static site generator and is still fixated on web fonts. His public speaking résumé includes talks in eight different countries at events like Beyond Tellerrand, Smashing Conference, CSSConf, and The White House. He is an emeritus of Filament Group, NEJS CONF, and still helps out with NebraskaJS. Read more about Zach »

YUI DataTable and You: Making the Marriage Work
JavaScript Code Coverage Tool for Firebug
8 Replies
    1. Zach Leatherman Disqus

      17 May 2007 at 07:46PM
      Well, it's been the week of inconsistent IE6 bugs, as testing in one IE6 browser has proven to be different than the next.It looks like javascript:void(0) works sometimes, but not always, as it results in still popping up the "secure and nonsecure items" alert. Clicking "Yes" results in a "Page Not Found" stock IE page being displayed inside of your iframe. Naturally, this only occurs on a certain percentage of IE6 clients, but it occurs none-the-less.I went through all the other fixes above, with less than ideal results. Finally, I caved into setting the source to a blank.html file containing <html></html>
      1. Zach Leatherman Disqus

        18 May 2007 at 08:03PM
        Ok, after too many attempts to fix this, I finally found the ideal solution. Set your src attribute to:javascript:false;document.write("");Courtesy of the BlockUI plugin for JQuery.
        1. could you just change your original post with the improved src value? I should have read the comments before putting in the fix, but I did not and had to do the build twice with a bit of frustration in between.p.s. passed this on to which is why I needed it in the first place.
          1. Thanks a bunch for the capital B in frameBorder hint - I was starting to go nuts over trying to red of that border!
            1. Thanks for the case sensitive tip. You saved my day.
              1. happyfish Disqus

                08 Aug 2008 at 06:27AM
                I tried this with the document.write to get rid of the false and it works except it shows that the page is still loading even when it is fully loaded.
                1. Kurtiss Hare Disqus

                  20 Aug 2009 at 10:15PM
                  @happyfish (and others): I've found that using the following "src":'javascript:false;;document.write("");document.close();'both achieves the effects described above and also prevents "infinite load" scenarios when you move the iframe around in the DOM tree, which reloads the frame's src (at least in FireFox).HTH.
                  1. Zach Leatherman Disqus

                    20 Aug 2009 at 10:43PM
                    Thanks Kurtiss!
                      Social Card Image Preview

                      This is what will show up when you share this post on Social Media:

                      How did you do this? I automated my Open Graph images. (Peer behind the curtain at the test page)