Subscribe
Follow
TournologySo 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.
8 Comments
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>
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.
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 http://marcgrabanski.com/code/jquery-calendar/ which is why I needed it in the first place.
Thanks a bunch for the capital B in frameBorder hint – I was starting to go nuts over trying to red of that border!
Thanks for the case sensitive tip. You saved my day.
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.
@happyfish (and others): I’ve found that using the following “src”:
‘javascript:false;document.open();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.
Thanks Kurtiss!