Javascript Compatibility in IE

Question

Why is it that my Javascript widget does not work properly on IE but fine on Firefox? Moreover, Firebug doesn't produce any errors. What can I do to make sure my Javascript widget is operational in IE? Are there any tools to help me?

• MooGoo: Check line 34 column 5 of the code you didn't paste.
• Jason McCreary: Harsh MooGoo, but it did make me LOL.
• syker: That made me LOL as well, but I guess I was looking for more general answers on tackling the issue. For example, a Firebug tool for IE?

Answer 1

A common problem with JS in IE is trailing commas in object and array literals: IE chokes and dies. All other browsers are fine. So look for:

an_array = [1,2,3,]; // Trailing comma kills IE!
an_obj = {foo: "This is foo",
 bar: "This is bar", // Trailing comma kills IE!
 };

• slebetman: +1: I myself use a script to check this using regexp before checking in code. I sometimes get false positives but that is much better than my boss calling me at 2AM to fix a broken update.
• Erik Reppen: I'm no lover of IE but that's a classic example of IE doing the right thing for a change. Let bad code break.

Answer 2

Seems like a compatibility issue with IE. You could look in the lower right for the standard JavaScript error alert icon. In addition, IE Developer Toolbar is helpful, but not as nice as Firebug. Worst case, start throwing some alerts until you find the breakpoint.

Just a stab in the dark, if you are using console.log, that will fail in other browsers. As a developer, I've left that in before.

• letronje: I define a custom global function and use that instead: function log(o) { try{ console.log(o); }catch(e){} }
• lock: for some weird reason, i find IE Dev Toolbar as nice as firebug when I use it inside IETester

Answer 3

IEs 6+ all conform pretty well to the ECMA spec (essentially covers all the core 'programmey' objects of Javascript like the Date, Math, and Array objects -- anything dealing with Math or data types). However, if you're dealing with anything that touches the standard W3C DOM (those objects that relate to accessing any part of an HTML document or events fired therein) it's most likely your functions will kerplode in IE which has been lagging behind the DOM spec for over ten years. Entire frameworks have been built to compensate for this. If you're dealing with events or accessing HTML elements or their attributes you're going to want to use a framework like JQuery or start reading some books on JavaScript to learn what objects and properties you need to branch for.

Another thing to keep in mind is that that all of the browser manufacturers add their own proprietary methods by way of experimentation. Thus, Firefox's nonstandard but very popular console.log. To be fair to MS (who I still find despicable), their original version of the XMLHttpRequest object is what hatched all of this Ajax stuff and they also gave us innerHTML which is not a part of any standard but was adopted and works the same in all browsers.

Basically, all the browsers parse and interpret their own versions of JavaScript. It's up to you to learn all the common bits that work the same across the board and how to go about dealing with the stuff none of them agree on.

Books: I recommend Jeremy Keith's DOM Scripting and then the big giant O'Reilly book (I also like the big giant Complete Reference book from Osbourne).

Sites: Quirksmode.org seems to have less content than it used to but still has a lot of good advice on writing core JS to compensate for IE incompetence. Lots of stuff on CSS too.

Answer 4

Open the widget in IE8 and use the lame(compared to Firebug) developer toolbar that comes with it(Keyboard shortcut: F12).

Answer 5

Sadly, JavaScript doesn't work exactly the same in all browsers. You pretty much just need to debug it.

See http://blogs.msdn.com/b/ie/archive/2004/10/26/247912.aspx for a discussion of three different tools that can act as a debugger for IE JavaScript.

Answer 6

maybe you need to add compatibility algorithm from MDC

here is the minified version of Array.every, Array.filter, Array.forEach, Array.indexOf, Array.lastIndexOf, Array.map, Array.reduce, Array.reduceRight, Array.some, Function.bind, Object.keys

if(!Array.prototype.every)Array.prototype.every=function(fun,thisp){var len=this.length>>>0;if(typeof fun!="function")throw new TypeError;var thisp=arguments[1];for(var i=0;i<len;i++)if(i in this&&!fun.call(thisp,this[i],i,this))return false;return true}; if(!Array.prototype.filter)Array.prototype.filter=function(fun,thisp){var len=this.length>>>0;if(typeof fun!="function")throw new TypeError;var res=[];var thisp=arguments[1];for(var i=0;i<len;i++)if(i in this){var val=this[i];if(fun.call(thisp,val,i,this))res.push(val)}return res}; if(!Array.prototype.forEach)Array.prototype.forEach=function(fun,thisp){var len=this.length>>>0;if(typeof fun!="function")throw new TypeError;var thisp=arguments[1];for(var i=0;i<len;i++)if(i in this)fun.call(thisp,this[i],i,this)};if(!Array.prototype.indexOf)Array.prototype.indexOf=function(elt){var len=this.length>>>0;var from=Number(arguments[1])||0;from=from<0?Math.ceil(from):Math.floor(from);if(from<0)from+=len;for(;from<len;from++)if(from in this&&this[from]===elt)return from;return-1}; if(!Array.prototype.lastIndexOf)Array.prototype.lastIndexOf=function(elt){var len=this.length;var from=Number(arguments[1]);if(isNaN(from))from=len-1;else{from=from<0?Math.ceil(from):Math.floor(from);if(from<0)from+=len;else if(from>=len)from=len-1}for(;from>-1;from--)if(from in this&&this[from]===elt)return from;return-1}; if(!Array.prototype.map)Array.prototype.map=function(fun,thisp){var len=this.length>>>0;if(typeof fun!="function")throw new TypeError;var res=new Array(len);var thisp=arguments[1];for(var i=0;i<len;i++)if(i in this)res[i]=fun.call(thisp,this[i],i,this);return res}; if(!Array.prototype.reduce)Array.prototype.reduce=function(fun){var len=this.length>>>0;if(typeof fun!="function")throw new TypeError;if(len==0&&arguments.length==1)throw new TypeError;var i=0;if(arguments.length>=2)var rv=arguments[1];else{do{if(i in this){var rv=this[i++];break}if(++i>=len)throw new TypeError;}while(true)}for(;i<len;i++)if(i in this)rv=fun.call(undefined,rv,this[i],i,this);return rv}; if(!Array.prototype.reduceRight)Array.prototype.reduceRight=function(fun){var len=this.length>>>0;if(typeof fun!="function")throw new TypeError;if(len==0&&arguments.length==1)throw new TypeError;var i=len-1;if(arguments.length>=2)var rv=arguments[1];else{do{if(i in this){var rv=this[i--];break}if(--i<0)throw new TypeError;}while(true)}for(;i>=0;i--)if(i in this)rv=fun.call(undefined,rv,this[i],i,this);return rv}; if(!Array.prototype.some)Array.prototype.some=function(fun,thisp){var i=0,len=this.length>>>0;if(typeof fun!="function")throw new TypeError;var thisp=arguments[1];for(;i<len;i++)if(i in this&&fun.call(thisp,this[i],i,this))return true;return false}; if(!Function.prototype.bind)Function.prototype.bind=function(context){if(typeof this!=="function")throw new TypeError;var _arguments=Array.prototype.slice.call(arguments,1),_this=this,_concat=Array.prototype.concat,_function=function(){return _this.apply(this instanceof _dummy?this:context,_concat.apply(_arguments,arguments))},_dummy=function(){};_dummy.prototype=_this.prototype;_function.prototype=new _dummy;return _function}; Object.keys=Object.keys||function(o){var result=[];for(var name in o)if(o.hasOwnProperty(name))result.push(name);return result};