What are the common mistakes to avoid when coding javascript for Internet Explorer?

Question

I'm about to start coding a new, javascript-heavy website, but before I start I'd like to minimize my debugging time in Internet Explorer by knowing beforehand what the quirks are. I'm not planning to worry too much about IE6.

What are the common mistakes/differences to avoid in javascript code that work fine in other browsers, but break in Internet Explorer?

Answer 1

If you assign an event handler directly via javascript, event will not be provided automatically.

myElement.onclick = function(e) {
    alert(typeof e); // undefined
}

the workaround is to pull window.event.

myElement.onclick = function(e) {
    e = e || window.event;
    alert(typeof e); // this is ok now
}

if you're an event handler directly on the element, you can provide the event reference manually.

<input type="text" onclick="myMethod(event);"></input>

this is cross browser and is fine, if you have to go that route.

using attachEvent to set an event handler provides the event object as a parameter to the method automatically.

Answer 2

Here's a subtle one: if your site has multiple frames (or iframes), and you've got Javascript code communicating between frames sometimes, IE (6 and 7, not so sure about 8 and 9) is very picky about the "lineage" of Javascript objects, even ones without any DOM references. What that means is that if you communicate a Javascript object of almost any type (strings and numbers are usually OK, but even Date instances have caused me problems in the past) from one frame to another, if at some point later the source frame is updated with a new page, the destination page will get an exception if it tries to mess with that communicated object. Firefox was pretty mellow about that sort of thing, but when IE garbage collects the old page, it thereafter does not like references to the Javascript objects that page created.

Answer 3

IE (8 and lower, not sure about 9) cannot handle accessing characters in strings like arrays, as in:

var str = 'abc';
var c = str[2];
alert(c)

In most browsers this will alert 'c', but IE alerts 'undefined'. For cross-browser reasons one should rather use the charAt function:

var str = 'abc';
var c = str.charAt(2);
alert(c)

This will alert 'c' in IE as well.

Another small difference is that of the trailing comma in objects and arrays. This is valid in most browsers, but raises errors in IE:

ar = [1,2,3,]

and also

ob = {name:'janet', surname:'walker',}

which can be quite irritating if you're not aware of it. Both these problems are probably something I run in frequently because I'm used to python, but it's still worth looking out for.

Answer 4

Concatenate strings with +

var str="";
for (var i = 0; i < max; ++i) {
  str += somefunction(i);
}

On MSIE it can take several minutes. I once did a test where Opera an Firefox where finished after a few seconds, but MSIE hadn't finished after 20 MINUTES!

However, if using an array, MSIE was fast:

var str = [];
for (var i = 0; i < max; ++i) {
   str.push( somefunction(i));
}
str = str.join("");

Sorry, but can't find the post I made about it right now.