Javascript that crashes IE

Recently I was helping my colleague to fix a strange bug in his Javascript. The bug behave like this:

1. Open the web page in IE.
2. After everything are loaded (HTML, images, scripts, …), click on address bar and press enter
3. IE crashed

When I try to identify the bug, I’ve created a simple page that can reproduce the bug.

crash.html

<div id="panel"></div>
<a href="#" onclick="loadScript(); return false;">Load script</a>

<script>
    var n = 0;
    var callback = function() {
        n++;
        var panel = document.getElementById("panel");
        panel.innerHTML = "loadScript called " + n + " times.";
        var node = document.getElementById("testid");
        node.parentNode.removeChild(node);
    }

    var loadScript = function() {
        var node = document.createElement("script");
        node.src="crash.js";
        node.id = "testid";

        document.getElementsByTagName("head")[0].appendChild(node);
    }

    window.onload = loadScript;
</script>

crash.js

callback();

What the page does is to create a script node dynamically and insert into the document to load an external .js file. When the external “crash.js” is loaded, it calls a function to update the page content and remove the script node. IE will be crashed by either click on the address and hit enter button or just click on the link “Load script”.

The actual reason why IE crashes on this situation is unknown, but one thing can be sure is it only crashes if the same URL is being requested. If you try to append a dummy random query to the script src URL, IE is working fine.

I’ve also discovered another way, which I think is better in solving this problem. Simply use a setTimeout() function to wrap around the removeChild statement with timeout = 0.

setTimeout(function() {
    var node = document.getElementById("testid");
    node.parentNode.removeChild(node);
}, 0);

The problem will be gone by doing this.