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?

Answer 1

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};

Answer 2

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 3

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!
         };

Answer 4

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 5

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

Answer 6

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.