Javascript Compatibilité dans IE

Question

Pourquoi est-ce que mon widget Javascript ne fonctionne pas correctement sur IE mais bien sur Firefox? De plus, Firebug ne génère aucune erreur. Que puis-je faire pour m'assurer que mon widget Javascript est opérationnel dans IE? Y a-t-il des outils pour m'aider?

Answer 1

Cela ressemble à un problème de compatibilité avec IE. Vous pouvez regarder en bas à droite pour l'icône standard d'alerte d'erreur JavaScript. En outre, IE Developer Toolbar est utile, mais pas aussi bien que Firebug. Dans le pire des cas, commencez à lancer quelques alerts jusqu'à ce que vous trouviez le point d'arrêt. Juste un coup dans le noir, si vous utilisez console.log, qui échouera dans d'autres navigateurs. En tant que développeur, j'ai laissé cela en avant.

Answer 2

Ouvrez le widget dans IE8 et utilisez la barre d'outils du développeur lame (par rapport à Firebug) qui l'accompagne (raccourci clavier: F12).

Answer 3

Malheureusement, JavaScript ne fonctionne pas exactement de la même manière dans tous les navigateurs. Vous avez juste besoin de le déboguer. Voir http://blogs.msdn.com/b/ie/archive/2004/10/26/247912.aspx pour une discussion de trois outils différents qui peuvent agir comme un débogueur pour JavaScript IE.

Answer 4

Un problème commun avec JS dans IE est la virgule flottante dans les littéraux d'objet et de tableau: selfs et matrices IE. Tous les autres navigateurs sont bien. Regardez donc pour:

an_array = [1,2,3,]; // Trailing comma kills IE! 

an_obj = {foo: "This is foo", 
      bar: "This is bar", // Trailing comma kills IE! 
     }; 

Answer 5

IEs 6+ sont tous conformes assez bien à la spécification ECMA (couvre essentiellement tous les noyau objets « programmey » de Javascript comme la date, les mathématiques et les objets Array - tout ce qui touche aux mathématiques ou Types de données). Cependant, si vous avez affaire à tout ce qui touche au DOM W3C standard (les objets qui concernent l'accès à une partie d'un document HTML ou aux événements qui y sont déclenchés), vos fonctions vont probablement kerploder dans IE qui est à la traîne depuis plus de dix ans. Des cadres entiers ont été construits pour compenser cela. Si vous avez affaire à des événements ou à l'accès à des éléments HTML ou à leurs attributs, vous allez vouloir utiliser un framework comme JQuery ou commencer à lire des livres sur JavaScript pour savoir quels objets et propriétés vous devez utiliser.

Une autre chose à garder à l'esprit est que tous les fabricants de navigateurs ajoutent leurs propres méthodes propriétaires à titre d'expérimentation. Ainsi, Firefox non standard, mais très populaire console.log. Pour être juste envers MS (que je trouve toujours méprisable), leur version originale de l'objet XMLHttpRequest est ce qui a éclos tous ces trucs Ajax et ils nous ont aussi donné innerHTML qui ne fait partie d'aucune norme mais a été adopté et fonctionne de la même manière tous les navigateurs

Fondamentalement, tous les navigateurs analysent et interprètent leurs propres versions de JavaScript. C'est à vous d'apprendre tous les points communs qui fonctionnent de la même manière dans tous les domaines et de savoir comment gérer les choses sur lesquelles aucun d'entre eux n'est d'accord. Livres: Je recommande le DOM Scripting de Jeremy Keith, puis le grand livre géant O'Reilly (j'aime aussi le grand livre de références complètes d'Osbourne). Sites: Quirksmode.org semble avoir moins de contenu que par le passé, mais a toujours beaucoup de bons conseils sur l'écriture de base JS pour compenser l'incompétence IE. Beaucoup de choses sur CSS aussi.

Answer 6

vous devez peut-être ajouter l'algorithme de compatibilité de MDC

est ici la version minified de 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};