What are the typical reasons Javascript developed on IE fails on Firefox?

Question

I often suffer from the problem opposite what's described in this post. That is, I've got code in a legacy application designed only for Internet Explorer and I need to get it to work in Firefox.

For example, I recently worked on an app that made heavy use of manually simulating click events, like this:

select.options[0].click();

...which completely broke the application in Firefox. But you wouldn't find that information in the answers to the other question, because that's not something you'd ever even attempt if your app first targeted Firefox.

What other things should a developer updating a legacy IE-only application look for when migrating to modern browsers?

Answer 1

Here's what my previous research uncovered. I've seen each of these issues prevent a real-world application from working in Firefox. Please feel free to edit.

---

The DOM

document.createElement should take only a tag name, but IE lets you pass arbitrary HTML (with attributes, etc)

• http://msdn.microsoft.com/en-us/library/ms536389(VS.85).aspx

document.getElementById should only find elements with the given id, but IE also returns elements with the given name

• http://msdn.microsoft.com/en-us/library/ms536437(VS.85).aspx

IE creates implicit global variables for DOM elements, but referencing an element this way in Firefox produces the following warning:

"Element referenced by ID/NAME in the global scope. Use W3C standard document.getElementById() instead."

• http://www.west-wind.com/weblog/posts/677442.aspx
• http://code.google.com/p/fbug/issues/detail?id=853

IE's document.all is a collection of all elements in the document. It is not supported by Firefox.

• http://msdn.microsoft.com/en-us/library/ms537434(v=vs.85).aspx

An Element's text in IE is retrieved using the innerText property. Firefox calls this property textContent.

• http://msdn.microsoft.com/en-us/library/ms533899(v=vs.85).aspx

IE allows items in collections to be referenced using function syntax (i.e. with parentheses) instead of the normal array indexing syntax (i.e. with brackets). For example, the following works in IE: document.forms(0). Firefox does not support this usage.

• http://msdn.microsoft.com/en-us/library/ms537457(v=VS.85).aspx

HTMLTableElement rows and cells should refer to HTMLCollections, but IE allows them to be called as functions; Firefox does not.

• http://msdn.microsoft.com/en-us/library/ms537484%28VS.85%29.aspx

IE defaults insertRow's index to -1; Firefox errors if the argument is omitted.

• http://msdn.microsoft.com/en-us/library/ms536457%28VS.85%29.aspx
• https://developer.mozilla.org/en/DOM/table.insertRow

The Node.text property is IE-only

• http://msdn.microsoft.com/en-us/library/ms534677%28VS.85%29.aspx
• https://developer.mozilla.org/En/DOM/Node.textContent

---

Events

window.event is an IE-specific way to access event information; it's not supported by Firefox.

• http://msdn.microsoft.com/en-us/library/ms535863(v=vs.85).aspx
• http://www.quirksmode.org/js/events_access.html#link3

Events are attached to Elements in IE using attachEvent. Firefox uses addEventListener. Note, also, that the names of events are subtly different in each browser.

• http://msdn.microsoft.com/en-us/library/ms536343(v=vs.85).aspx

In IE it's possible to get the mouse position from non-mouse events, but it's not in other browsers. In addition, the names of the mouse-coordinate properties are not the same in IE and Firefox.

• http://msdn.microsoft.com/en-us/library/ms533567(v=vs.85).aspx
• http://msdn.microsoft.com/en-us/library/ms533568(v=vs.85).aspx
• http://www.quirksmode.org/js/events_properties.html#position

IE supports a click method for triggering the onclick event on HTML elements. No such function exists in Firefox.

• http://msdn.microsoft.com/en-us/library/ms536363(v=vs.85).aspx
• http://lifescaler.com/2008/04/simulating-mouse-clicks-in-javascript/
• http://www.devtoolshed.com/content/fix-firefox-click-event-issue

---

XML

Firefox splits text nodes into 4096-char blocks; IE does not. This means that things like childNodes will be different in IE and Firefox.

• Is there a 4096 character limit for JavaScript XML text nodes?

Internet Explorer defines a parseError.errorCode property on XMLDocuments for detecting parser errors. Firefox loads an XML document that contains error information in the document with documentElement.nodeName=="parsererror".

IE ignores whitespace in XML; firstChild always returns the first ELEMENT_NODE

• http://www.w3schools.com/dom/prop_element_firstchild.asp
• https://developer.mozilla.org/en/Whitespace_in_the_DOM

The Node.xml property is IE-only

• http://www.w3schools.com/dom/prop_node_xml.asp
• http://www.grange.com.br/dicas-tecnicas/40-lotus/345-dom-xml-wrapper-for-javascript

---

Further reading

• http://www.reloco.com.ar/mozilla/compat.html
• https://developer.mozilla.org/en/migrate_apps_from_internet_explorer_to_mozilla
• http://www.impressivewebs.com/7-javascript-differences-between-firefox-ie/