IE Javascript Gotchas
From Zanecorpwiki
IE's (6) implementation of JavaScript is embarrassing and here's some of the reasons why:
Contents |
Problems with Attributes
Setting Attributes
'element.setAttribute(...)' is generally unreliable in IE. Works for somethings, not for others. Typically, you're better off with setting the attribute directly:
element.foo = 'bar';
Also, for boolean attributes, use literal 'true' and 'false'.[1] We ran into this problem specifically with 'onclick' and 'readonly'.
Reading Attributes
The same goes for reading attributes. Typically, better of not using 'getAttribute'. This is a known problem with 'class' and 'className', so in Firefox, a test like:
if (elem.getAttribute('class') == 'special') ...
will work, but in IE (6 at least), you must use:
if (elem.className == 'special') ...
Setting Style
Even Worse Setting Attribute Problems for Inputs
TODO: problem may actually be limited to setting the 'type' property.
There seems to be a deep problem with setting attributes on input elements:
var checkbox = document.createElement('input');
checkbox.type = 'checkbox';
checkbox.checked = true;
does not work. Instead, for IE, you have to do it one shot:
var checkbox = document.createElement('<input type="checkbox" checked="true" />');
Which is a completely bogus way to call createElement which should fail in every other browser. The one shot limitation is problematic because it forces you to organize code in unfortunate ways.
This problem seems to be limited to the input element. 'select' and 'option' elements seem to work OK.
Cannot Set Input Values Directly
Assume IE. Given form:
<form id="form" action="process.php"> <input id="input" type="hidden" name="foo" value="bar" /> </form>
and Javascript:
var input = document.getElementById('input');
input.value = 'baz';
document.getElementById('form').submit();
The form will be submitted with input foo still having a value of bar. In order to update the value in IE, you emmust/em access go through the form:
var form = document.getElementById('form');
form['foo'].value = 'baz';
form.submit();
To make it even more confusing, if you have something like:
document.getElementById('input').value = 'baz';
alert(document.getElementById('input').value);
you will indeed see 'baz' as the value, but on submission, the value reverts to 'bar'.
Node Type Constants
Want to test what a node is? Don't expect 'node.nodeType == ELEMENT' to work in IE. This is a good place to use a compatibility library that conditionally defines the constants as members of document. TODO: reference the dog food compatibility script
Extending Element
Not sure if this is all objects, or just some, but you can't easily extend the Element class via prototype with IE. The basic workaround is given here. One detrimental consequence of the Microsoft design is that you cannot componentize the HTC files because each time you reload it emredefines/em the behavior thing. We recommend creating exemplar HTC files that can be used directly if applicable, but which developers can also reference when building a composite file. We may develop a tool to deal with this in the future.
