Problèmes de compatibilité JavaScript sous IE et connaissances FF_Basic

La compatibilité JavaScript est depuis longtemps un problème majeur pour les développeurs Web. De nombreux développeurs ont du mal à composer avec les différences entre les spécifications formelles, les normes de facto et les implémentations. À cette fin, nous résumons principalement la compatibilité Javascript d'IE et Firefox sous les aspects suivants :

Copier le code Le code est tel suit :

1. Différences dans les fonctions et les méthodes ;
2. Accès et configuration du style
3. >5. Autres différences Traitement compatible.

1. Différences entre fonctions et méthodes

1. Méthode getYear()

[Instructions d'analyse] Regardez d'abord le code suivant :

Copier le code Le code est le suivant :

var year= new Date().getYear ();

document.write(année);

La date obtenue dans IE est "2010", et la date vue dans Firefox est "110", principalement parce que getYear dans Firefox renvoie la valeur de "année en cours-1900".

[Traitement de compatibilité] Ajoutez le jugement de l'année, tel que :

Copier le code Le code est le suivant :

var year= new Date().getYear ();

année = (année<1900?(1900 année):année
document.write(année);
Il peut également être appelé via getFullYear getUTCFullYear :

Copier le code

Le code est le suivant :var year = new Date().getFullYear (); document.write(année);

2. Fonction eval()

【Explication de l'analyse】 Dans IE, vous pouvez utiliser eval("idName") ou getElementById("idName") pour obtenir l'objet HTML avec l'identifiant de idName sous Firefox, vous ne pouvez utiliser que getElementById("idName") ; pour obtenir l'identifiant de l'objet HTML de idName.

[Traitement de compatibilité] Utilisez getElementById("idName") uniformément pour obtenir l'objet HTML avec l'identifiant de idName.

3. déclaration const

【Note d'analyse】Le mot-clé const ne peut pas être utilisé dans IE. Tel que :

Copier le code

Le code est le suivant :const constVar = 32;

Il s'agit d'une erreur de syntaxe dans IE.

[Traitement de compatibilité] N'utilisez pas const et utilisez plutôt var.

4.var

[Instructions d'analyse] Veuillez consulter le code suivant :

Copier le code

Le code est le suivant :echo=function(str){ document.écrire(str); }

Cette fonction fonctionne normalement sur IE, mais une erreur est signalée sur Firefox.

[Traitement de compatibilité] Il est normal d'ajouter var avant echo C'est le but de mentionner var.

5. problème de const

【Note d'analyse】Le mot-clé const ne peut pas être utilisé dans IE. Tel que const constVar = 32; Il s'agit d'une erreur de syntaxe dans IE.

【Solution】N'utilisez pas const et utilisez plutôt var.

2. Accès et paramètres de style

1. Attribut CSS "float"

[Explication de l'analyse] La syntaxe la plus basique permettant à Javascript d'accéder à une valeur CSS donnée est : object.style.property, mais certaines propriétés CSS ont les mêmes noms que les mots réservés en Javascript, tels que "float", "for" , "class "Attendez, différents navigateurs l'écrivent différemment.

Écrivez ceci dans IE :

Copier le code

Le code est le suivant :document.getElementById("header"). style.styleFloat = "gauche";

Écrivez ceci dans Firefox :

Copier le code

Le code est le suivant :document.getElementById("header"). style.cssFloat = "gauche";

[Traitement de compatibilité] Ajoutez un jugement avant d'écrire pour déterminer si le navigateur est IE :

Copier le code

Le code est le suivant :

if(document.all){ //
　document.getElementById("header").style.styleFloat = "left"
}
else{ //Quand ce n'est pas indéfini;
　document.getElementById("header").style.cssFloat = "gauche"
}

2. Accédez à "pour" dans la balise 【Explication de l'analyse】 Identique à l'attribut "float", vous devez également utiliser une distinction de syntaxe invisible pour accéder à "for" dans la balise

Écrivez ceci dans IE :

Copier le code Le code est le suivant :

var myObject = document.getElementById("myLabel ");
var monAttribute = monObjet.getAttribute("htmlFor");

Écrivez ceci dans Firefox :

Copier le code Le code est le suivant :

var myObject = document.getElementById("myLabel ");
var monAttribute = monObjet.getAttribute("pour");

[Traitement de compatibilité] La solution consiste d'abord à déterminer le type de navigateur.

3. Accéder et définir les attributs de la classe

[Explication de l'analyse] Également parce que class est un mot réservé en Javascript, ces deux navigateurs utilisent des méthodes JavaScript différentes pour obtenir cet attribut.

Comment écrire toutes les versions d'IE avant IE8.0 :

Copier le code Le code est le suivant :

var myObject = document.getElementById("header ");
var monAttribute = monObjet.getAttribute("className");

Applicable à IE8.0 et à la méthode d'écriture Firefox :

Copier le code Le code est le suivant :

var myObject = document.getElementById("header ");
var monAttribute = monObjet.getAttribute("class");

De plus, il existe les mêmes différences entre les deux navigateurs lors de l'utilisation de setAttribute() pour définir l'attribut Class.

Copier le code Le code est le suivant :

setAttribute("className",value);

Cette méthode d'écriture est applicable à toutes les versions d'IE antérieures à IE8.0 Remarque : IE8.0 ne prend pas non plus en charge l'attribut "className".

setAttribute("class",value); Applicable à IE8.0 et Firefox.

【Traitement compatible】

Première méthode, écrivez les deux :

Copier le code Le code est le suivant :

var myObject = document.getElementById("header ");
myObject.setAttribute("class","classValue");
myObject.setAttribute("className","classValue");
//Définissez la classe d'en-tête sur classValue

Méthode 2, IE et FF prennent en charge object.className, vous pouvez donc l'écrire comme ceci :

Copier le code Le code est le suivant :

var myObject = document.getElementById("header ");
myObject.className="classValue";//Définissez la classe d'en-tête sur classValue

Troisième méthode, déterminez d'abord le type de navigateur, puis utilisez la méthode d'écriture correspondante en fonction du type de navigateur.

4. Problème d'attribution de largeur et de hauteur d'objet

[Explication de l'analyse] Les instructions similaires à obj.style.height = imgObj.height ne sont pas valides dans FireFox.

[Traitement de compatibilité] Utilisez obj.style.height = imgObj.height 'px';

5. Ajouter du style

[Explication de l'analyse] Utilisez la méthode addRules() pour ajouter des styles dans IE, tels que : styleSheet.addRule("p","color:#ccc",styleSheet.length). utilisez insetRule dans le remplacement de la méthode FF (). Tels que styleSheet.insertRule("p{color:#ccc}",styleSheet.length).

【Traitement compatible】

Copier le code Le code est le suivant :

if(styleSheet.insertRule){
　//Méthode insertRule()
}else{
　//Méthode addRule()
}

6. Style final

【Explication de l'analyse】Parfois, nos styles personnalisés échoueront car il y a un chevauchement de styles, comme un style défini par un sélecteur de classe et un style défini par un sélecteur de balise, et ce dernier sera invalide. Ensuite, vous devez utiliser le style final à ce moment-là. Le style final dans IE est écrit sous le nom ele.currentStyle.property. La méthode d'écriture standard dans DOM consiste à utiliser l'objet document.defaultView, tel que document.defaultView.getComputedStyle(elel,null). Cette méthode est compatible avec FF.

.

[Traitement de compatibilité] Déterminez d'abord le navigateur (document.all), puis exécutez la méthode ci-dessus.

3. Méthodes DOM et références d'objets

1. getElementById

[Instructions d'analyse] Regardons d'abord un ensemble de codes :

Copier le code Le code est le suivant :

value="cliquez sur moi" ōnclick="alert(id.value)"/>
Dans Firefox, le bouton ne répond pas, mais dans IE, c'est OK, car pour IE, l'ID d'un élément HTML peut être utilisé directement comme nom de variable dans un script, mais il ne peut pas être utilisé dans Firefox.

【Traitement de compatibilité】Essayez d'utiliser la méthode d'écriture DOM du W3C. Lors de l'accès à l'objet, utilisez document.getElementById("id") pour accéder à l'objet par ID, et un ID doit être unique dans la page. nom de la balise Pour accéder à l'objet, utilisez document.getElementsByTagName("div")[0]. Cette méthode est prise en charge par de nombreux navigateurs.

Copier le code Le code est le suivant : onclick="alert(document.getElementById('id').value)"

2. Accès aux objets de la classe Collection

[Explication de l'analyse] Sous IE, vous pouvez utiliser () ou [] pour obtenir des objets de collection ; sous Firefox, vous ne pouvez utiliser que [] pour obtenir des objets de collection. Tel que :

document.write(document.forms("formName").src);

//Cette méthode d'écriture peut accéder à l'attribut scrc de l'objet Form sous IE

【Traitement de compatibilité】 Remplacez document.forms("formName") par document.forms["formName"]. Utilisez [] uniformément pour obtenir des objets de classe de collection.

3. Référence au cadre

[Explication de l'analyse] IE peut accéder à l'objet fenêtre correspondant à ce cadre via l'identifiant ou le nom, tandis que Firefox ne peut accéder à l'objet fenêtre correspondant à ce cadre que via le nom.

Par exemple, si la balise frame ci-dessus est écrite dans le htm à l'intérieur de la fenêtre de niveau supérieur, alors elle est accessible comme ceci :

IE : window.top.frameId ou window.top.frameName pour accéder à cet objet fenêtre

Firefox : cet objet fenêtre n'est accessible que via window.top.frameName.

[Traitement de compatibilité] Utilisez le nom du cadre pour accéder à l'objet cadre. De plus, il peut être utilisé dans IE et Firefox

.

window.document.getElementById("frameId") pour accéder à cet objet frame.

4. parentElement

[Explication de l'analyse] IE prend en charge l'utilisation de parentElement et parentNode pour obtenir le nœud parent. Firefox ne peut utiliser que parentNode.

[Compatibilité] Étant donné que Firefox et IE prennent en charge le DOM, parentNode est utilisé pour accéder au nœud parent.

5. Fonctionnement des tables

[Explication de l'analyse] Dans le tableau sous IE, que vous utilisiez innerHTML ou appendChild pour insérer

[Traitement de compatibilité] La solution est d'ajouter à l'élément

Copier le code

Le code est le suivant :var row = document.createElement("tr "); var cell = document.createElement("td");

var cell_text = document.createTextNode("Insérer du contenu");

cell.appendChild(cell_text);
row.appendChild (cell );
document.getElementsByTagName("tbody")[0].appendChild(row);

6. Supprimer les nœuds RemoveNode() et RemoveChild()

【Explication de l'analyse】appendNode peut être utilisé normalement sous IE et Firefox, mais RemoveNode ne peut être utilisé que sous IE.

La fonction de la méthode removeNode est de supprimer un nœud. La syntaxe est node.removeNode (false) ou node.removeNode (true).

removeNode (false) signifie supprimer uniquement le nœud spécifié, puis le nœud enfant d'origine de ce nœud est promu au nœud enfant du nœud parent d'origine.

removeNode(true) signifie supprimer le nœud spécifié et tous ses nœuds subordonnés. Le nœud supprimé devient un nœud orphelin et n'a plus de nœuds enfants ni de nœuds parents.

[Traitement de compatibilité] Il n'y a pas de méthode RemoveNode pour les nœuds dans Firefox. Elle ne peut être remplacée que par la méthode RemoveChild. Tout d'abord, revenez au nœud parent, puis supprimez le nœud à supprimer du nœud parent.

node.parentNode.removeChild(node);

// Afin de fonctionner normalement sous IE et Firefox, prenez le nœud parent de la couche précédente puis supprimez-le.

7. Nœuds obtenus par childNodes

[Explication de l'analyse] La signification de l'indice de childNodes est différente dans IE et Firefox. Jetez un œil au code suivant :

.

Copier le code Le code est le suivant :

• 1

moi!" onclick=
"alert(document.getElementById('main').childNodes.length)">



En fonctionnant respectivement avec IE et Firefox, le résultat d'IE est 3, tandis que le résultat de Firefox est 7. Firefox utilise la spécification DOM. "#text" représente le texte (espaces et sauts de ligne dénués de sens, etc.). Il sera également analysé dans un nœud dans Firefox, seul le texte ayant une signification réelle sera analysé dans "#text". ". .

【Traitement compatible】

Méthode 1 : lors de l'obtention de nœuds enfants, vous pouvez utiliser node.getElementsByTagName() pour éviter ce problème. Cependant, getElementsByTagName n'est évidemment pas aussi performant que childNodes pour le parcours complexe de structures DOM, car childNodes peut mieux gérer la hiérarchie DOM.

Méthode 2 : Dans l'application réelle, lorsque Firefox traverse des nœuds enfants, vous pourriez aussi bien ajouter :

dans la boucle for

if(childNode.nodeName=="#text") continue ;//Ou utilisez nodeType == 1.

Cela vous permettra de sauter certains nœuds de texte.

Lecture approfondie

"La différence entre les childNodes dans IE et FireFox"

8. Firefox ne peut pas prendre en charge innerText

[Explication de l'analyse] Firefox ne prend pas en charge innerText. Il prend en charge textContent pour implémenter innerText. Cependant, textContent ne prend pas en compte la méthode d'affichage des éléments comme innerText, il n'est donc pas entièrement compatible avec IE. Si textContent n'est pas utilisé, innerHTML peut être utilisé à la place si la chaîne ne contient pas de code HTML. Vous pouvez également utiliser js pour écrire une méthode pour l'implémenter. Vous pouvez vous référer à l'article " Implémentation de l'attribut innerText pour Firefox ".

[Traitement de compatibilité] Compatible en déterminant le type de navigateur :

Copier le code Le code est le suivant :if(document.all){

document. getElementById('element').innerText = "mon texte"

} else{
document.getElementById('element').textContent = "mon texte"
}

4. Gestion des événements

Si le traitement des événements est impliqué lors de l'utilisation de JavaScript, vous devez connaître les différences entre les événements dans les différents navigateurs. Il existe trois principaux modèles d'événements JavaScript (voir « Prise en charge de trois modèles d'événements à la fois »), ce sont NN4, IE4 et W3C/Safar.

1. fenêtre.événement

[Instructions d'analyse] Regardons d'abord un morceau de code

Copier le code Le code est le suivant :fonction et()

{

alerte (événement);//IE : [objet]
}



Le résultat de l'exécution du code ci-dessus dans IE est [objet], mais il ne peut pas s'exécuter dans Firefox.

Parce que dans IE, l'événement peut être utilisé directement comme attribut de l'objet window, mais dans Firefox, le modèle W3C est utilisé, qui propage les événements via la méthode de transmission de paramètres, ce qui signifie que vous devez fournir un paramètre pour votre fonction. Fournit une interface de réponse aux événements.

[Traitement de compatibilité] Ajoutez un jugement d'événement pour obtenir le bon événement en fonction des différents navigateurs :

Copier le code Le code est le suivant :fonction et()

{

evt =evt?evt:(window.event?window.event:null);
//Compatible avec IE et Firefox
alert(evt);
}

2. Obtention de la valeur du clavier

[Explication de l'analyse] IE et Firefox ont des méthodes différentes pour obtenir les valeurs du clavier. On peut comprendre que event.qui sous Firefox est équivalent à event.keyCode sous IE. Concernant leurs différences, veuillez vous référer à "Test de compatibilité de keyCode, which et charCode dans les événements clavier"

【Traitement compatible】

Copier le code Le code est le suivant :

fonction myKeyPress(evt){
//Compatible IE et Firefox obtiennent l'objet keyBoardEvent
evt = (evt) ? evt : ((window.event) ? window.event : "")
//Compatible avec IE et Firefox pour obtenir la valeur de la clé de l'objet keyBoardEvent
var key = evt.keyCode?evt.keyCode:evt. Which;
if(evt.ctrlKey && (key == 13 || key == 10)){
　　　　 // Appuyez simultanément sur Ctrl et Entrée. Touche
//faire quelque chose ;
}
}

3. Obtention des sources d'événements

[Explication de l'analyse] Lors de l'utilisation de la délégation d'événement, la source de l'événement est obtenue pour déterminer de quel élément provient l'événement. Cependant, sous IE, l'objet événement a l'attribut srcElement mais pas d'attribut target sous Firefox, l'objet pair en a ; attributs target, mais il n'y a pas d'attribut srcElement.

【Traitement compatible】

Copier le code Le code est le suivant :

ele=function(evt){ // Capturer l'événement en cours L'objet de l'action
evt=evt||window.event;
return
(obj=event.srcElement?event.srcElement:event.target;);
}

4. Surveillance des événements

【Explication de l'analyse】En termes d'écoute et de traitement des événements, IE fournit deux interfaces : attachEvent et detachEvent, tandis que Firefox fournit addEventListener et removeEventListener.

[Traitement de compatibilité] Le traitement de compatibilité le plus simple consiste à encapsuler ces deux ensembles d'interfaces :

Copier le code Le code est le suivant :

function addEvent(elem, eventName, handler) {
if (elem.attachEvent) {
elem.attachEvent("on" eventName, function(){
handler.call(elem)});
//La fonction de rappel call() est utilisé ici, que cela pointe vers elem
} else if (elem.addEventListener) {
elem.addEventListener(eventName, handler, false
}
}
function removeEvent(elem); , eventName, handler) {
if (elem.detachEvent) {
elem.detachEvent("on" eventName, function(){
(), que cela pointe vers elem
　} else if ( elem.removeEventListener) {
　elem.removeEventListener(eventName, handler, false
　}
>

Il est important de noter que sous Firefox, cette fonction de gestionnaire d'événements pointe vers l'élément surveillé lui-même, mais ce n'est pas le cas sous IE. Vous pouvez utiliser l'appel de fonction de rappel pour faire pointer le contexte actuel vers l'élément surveillé. élément.

5. Position de la souris

[Explication de l'analyse] Sous IE, l'objet pair a des attributs x, y, mais pas d'attributs pageX, pageY ; sous Firefox, l'objet pair a des attributs pageX, pageY, mais pas d'attributs x, y.

【Traitement de compatibilité】Utilisez mX (mX = event.x ? event.x : event.pageX;) pour remplacer event.x sous IE ou event.pageX sous Firefox. Pour compliquer les choses, il faut aussi considérer la position absolue

Copier le code Le code est le suivant :

fonction getAbsPoint(e){

var x = e.offsetLeft, y = e.offsetTop;
while (e = e.offsetParent) {
x = e.offsetLeft;
y = e.offsetTop; alerte("x:"x "," "y:" y);
}




5. Traitement de compatibilité des autres différences

1. XMLHttpRequête 【Explication de l'analyse】new ActiveXObject("Microsoft.XMLHTTP"); ne fonctionne que dans IE, Firefox ne le prend pas en charge, mais il prend en charge XMLHttpRequest.

【Traitement compatible】

Copier le code

Le code est le suivant :

function createXHR() {
var xhr=null;
if(window.XMLHttpRequest){
xhr=new ActiveXObject("Msxml2.XMLHTTP"
}else{
essayez {
xhr=new ActiveXObject("Microsoft.XMLHTTP");
}
catch() {
xhr=null
}
}
if; (!xhr)retour;
retour xhr
}

2. Fenêtres modales et non modales

[Explication de l'analyse] Les fenêtres modales et non modales peuvent être ouvertes via showModalDialog et showModelessDialog dans IE, mais Firefox ne le prend pas en charge.

【Solution】 Utilisez directement window.open (pageURL, nom, paramètres) pour ouvrir une nouvelle fenêtre. Si vous devez transmettre des paramètres, vous pouvez utiliser frame ou iframe.

3. Problème d'attribut input.type

L'attribut input.type est en lecture seule sous IE, mais il peut être modifié sous Firefox

4. Opération d'option sur l'élément sélectionné

Pour définir les options, IE et Firefox ont des méthodes d'écriture différentes :

Firefox : peut être configuré directement

Copier le code Le code est le suivant :

option.text = 'fooooooooo';

IE : peut uniquement être défini

Copier le code Le code est le suivant :

option.innerHTML = 'fooooooo';

Méthode pour supprimer une option sélectionnée :

Firefox : Oui

Copier le code Le code est le suivant :

select.options.remove(selectedIndex);

IE7 : Il peut être utilisé

Copier le code Le code est le suivant :

select.options[i] = null;

IE6 : Besoin d'écrire

Copier le code Le code est le suivant :

select.options[i].outerHTML = nul;

5. Analyse de l'alt et du titre de l'objet img

[Explication de l'analyse] L'objet img a deux attributs, alt et title La différence est que alt : une invite lorsque la photo n'existe pas ou qu'il y a une erreur de chargement.

titre : description de la pointe de la photo. Si le titre n'est pas défini dans IE, alt peut également être utilisé comme pointe de img. Cependant, dans Firefox, les deux sont utilisés exactement comme défini dans la norme

.

Lors de la définition de l'objet img.

【Traitement de compatibilité】 Il est préférable d'écrire tous les objets alt et title pour s'assurer qu'ils peuvent être utilisés normalement dans différents navigateurs.

6. Problème de rafraîchissement img src

[Instructions d'analyse] Jetons d'abord un coup d'œil au code :

Copier le code Le code est le suivant :

Sous IE, ce code peut être utilisé pour rafraîchir l'image, mais pas sous FireFox. Principalement un problème de mise en cache.

[Traitement de compatibilité] Ajoutez un nombre aléatoire après l'adresse pour résoudre le problème :

Copier le code Le code est le suivant :

Résumé

Il existe de nombreuses différences en Javascript entre IE et Firefox. Pour assurer la compatibilité, je pense qu'il est nécessaire d'organiser certaines différences communes dans une bibliothèque js, telles que les opérations DOM, le traitement des événements, les requêtes XMLHttpRequest, etc., ou vous pouvez choisissez également d'utiliser certaines bibliothèques existantes (telles que jQuery, YUI, ExtJs, etc.), mais je pense qu'il est toujours nécessaire de comprendre ces différences, ce qui nous sera utile pour participer à la compatibilité et à la convivialité du code.

Il y a toujours plus de solutions que de problèmes. Même si la compatibilité des navigateurs est frustrante, les développeurs front-end peuvent toujours la résoudre !