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

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.

Answer 2

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

Answer 3

Yeah, IE debugging can be a pain. In recent IE's you can set breakpoints using the developer tools and step through until you find what's broken. Then your best bet is to try another approach besides the thing that breaks.

For example, just today I had code where a call to jQuery's .empty() would crash IE when the element I was emptying contained only dynamic content. I worked around it by re-building the container using innerHTML() in its parent (just creating a new, empty container instead of emptying the existing one). I wish I knew why it was crashing to begin with, but I get the same result sans crash, so that works for me.

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

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 6

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 7

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