This might be the most obscure problem ever, but it caused me such a headache that I thought I would blog about it on the off chance that one person might have this same issue.

First off I’m using ThickBox to handle some of the cool visual effects in the JumpBox admin interface. Such as:

jumpbox screenshot 1

Everything was fine and dandy until we decided to start serving the admin interface over https. This worked for all browsers EXCEPT IE6. In IE6 when ThickBox tries to display you get this security warning:

jumpbox screenshot 2

“This page contains both secure and nonsecure items. Do you want to display the nonsecure items?”

After a small amount of searching on the ThickBox forums I found a post that referenced a blog post about iframes, https, and IE. The conclusion is that ThickBox creates an iframe without a “src” attribute, and in IE6 over HTTPS this throws up the warning as seen above. So the solution is to add a src attribute to the iframe and point it at a blank html file on the server.

The fix is achieved by modifying the ThickBox javascript file. Near the beginning of the TB_show function the following line:

$(“body”).append(“<iframe id=’TB_HideSelect’></iframe><div id=’TB_overlay’></div><div id=’TB_window’></div>”);

… should be changed to:

$(“body”).append(“<iframe src=”blank.html” id=’TB_HideSelect’></iframe><div id=’TB_overlay’></div><div id=’TB_window’></div>”);

As advertised this fixes the warning from IE6. However this breaks… something… in Firefox 2 on OS X. I say “something” because I really don’t know what is going on. Everything works fine in Firefox on XP, Safari, IE6 and IE7. Here’s a screen grab:

jumpbox screenshot 3

Apparently this weirdness is caused by the src=’blank.html’ on the iframe. How this is causing problems is beyond me. The solution is to do a little browser detection to determine if we’re dealing with IE, in that case add the src attribute to the iframe, and the rest of the time forget about it:

if(navigator.appName == “Microsoft Internet Explorer”) {
$(“body”).append(“<iframe src=’blank.html’ id=’TB_HideSelect’></iframe><div id=’TB_overlay’></div><div id=’TB_window’></div>”);
} else {
$(“body”).append(“<iframe id=’TB_HideSelect’></iframe><div id=’TB_overlay’></div><div id=’TB_window’></div>”);
}

To anyone still reading, I hoped this helps. Otherwise sorry you had to listen to me rant about another JavaScript issue that is fueling my hatred of supporting multiple browsers.

UPDATE: Mark was kind enough to point out that instead of using a blank html file as the source of the iframe, you can use “javascript:false;” which is compatible with all browsers thus eliminating the need to do browser detection. So instead of that ugly chunk of code seen above, all you need is:

$(“body”).append(“<iframe src=’javascript:false;’ id=’TB_HideSelect’></iframe><div id=’TB_overlay’></div><div id=’TB_window’></div>”);

This is a much simpler and cleaner solution.