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.

About these ads

12 thoughts on “Javascript that crashes IE

  1. This is also necessity for HTTPS JSON cross/domain calls from non HTTPS clients.

    Firefox was firing correctly but IE 7 was crashing after second call before random query string was inserted.

    Thank you for the reminder of this crucial bug.

  2. This was a good article.
    I have another problem similar to this one. I have a input field and when i press tab to move to the next input field IE freezes and i have to use task manager to close it. In Fire Fox it works like a champ.

    I have a JavaScript function that is fired with the onfocus event, the function removes the value of the input field so the user can write into the field.
    If you have any experience with this i would love to hear from you.

  3. i was having a prob with IE6 crashing when using the back button. I narrowed it down to the replacechild DOM call I was making. Wrapping it in the settimeout fixed it. Like ‘man’ said, this saved me hours of work! Thanks

  4. Hi ilovethweb, I don’t have an explanation here. What I guess is this issue is caused by modifying nodes across multiple threads in IE.

    E.g. if one thread in IE is executing child content after the appendChild happened (let’s call this IE event thread), while at the same time, the other thread (user thread) try to remove the child, data inconsistent issue arise hence crashing IE. IE should be fixed to handle this kind of situation by having proper data synchronization across multiple threads. Meanwhile, using setTimeout will schedule the action into the IE event thread, hence effectively serializing the action.

    Anyway, it’s just my guess without any validation. If anyone knows the answer, please let me know.

  5. After spending all night doing trial/error tests to narrow down the cause of IE not behaving, I Googled “dynamically removing script element crashes ie” and got to your page. This solution fixed my problem.

    Thank you, thank you!

    Time for sleep…

  6. Brilliant. I spent an hour or so debugging my script until I found that it was the removal of the scrpit tag/element that was causing IE6 to crash. This saved me wasting another couple of hours trying to figure out how to work around it!

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s