Operation Aborted

Ran into a JavaScript problem with everybody’s favorite browser recently. Manipulating the head element from within (say by adding additional script or link elements before the page loads) was resulting in an enormously helpful “Operation Aborted” error message in versions of Internet Explorer prior to 7. Of course, like all things IE, this error’s appearance was inconsistent.

Here’s a simplified example of the unassuming script that caused the error. This was executed by an external JavaScript file linked within the head element before window.onload fired:

var e = document.createElement('script');
e.type = 'text/javascript';
e.src = 'script.js';
document.getElementsByTagName('head')[0].appendChild(e);

I was eventually able to track the problem down to the presence of a base tag. It didn’t matter if it was an open <base> or a self-closing <base />, if it came before the <script> that was manipulating the head, then IE stopped everything and issued the error. (At this point in script execution document.getElementsByTagName('head')[0] is a valid HTML element so testing for its availability before attempting to appendChild() doesn’t avoid the error. try/catch() is also of no assistance.)

Closing the <base> with something like <!--[if lt IE 7]></base><![endif]--> seems to resolve the issue. In a deliciously redundant twist, this fix works for a self-closing <base /> as well. Moving either variety of base after the script in question sidesteps the issue completely.

But wouldn’t it be nice if the fix didn’t require restructuring the HTML? Conditional compilation to the rescue. With this proprietary JScript feature we can force Internet Explorer to check for any base elements and delay the appendChild() with a window.setInterval() until after it finishes parsing the head element. Since this problem only affects versions of the browser prior to 7 (and isn’t the result of a missing native JavaScript method) we toss in a version sniff to let the slightly more capable Seven off the hook:

var e = document.createElement('script');
e.type = 'text/javascript';
e.src = 'script.js';
/*@cc_on
// Somone set up us the IE!
var bases   = document.getElementsByTagName('base');
var ie      = parseFloat(navigator.appVersion.split('MSIE')[1]);
if (bases.length && ie < 7)
{
    // All your base are belong to us
    var IEBaseFixId = window.setInterval(function()
    {
        if (document.body)
        {
            document.getElementsByTagName('head')[0].appendChild(e);
            window.clearInterval(IEBaseFixId);
        };
    }, 50);
}
else
{
@*/
document.getElementsByTagName('head')[0].appendChild(e);
//@cc_on };

It’s nasty hack but perhaps it will save someone else a few premature gray hairs. Or maybe you have a better solution (that doesn’t involve window.onload)?

Update

Tino Zijdel wrote in with this “when in Rome” approach shortly after comments were closed.

var e = document.createElement('script');
e.type = 'text/javascript';
e.src = 'script.js';
/*@cc_on
var bases = document.getElementsByTagName('base');
if (bases.length && bases[0].childNodes.length)
{
    // when in Rome
    bases[0].appendChild(e);
}
else
{
@*/
document.getElementsByTagName('head')[0].appendChild(e);
//@cc_on };

I like it. If older versions of IE think the base element should allow other elements inside it then who are we to argue—when the alternative is the browser equivalent of a hissy fit? It’s still a hack but less so than using setInterval().