La compatibilité JavaScript est depuis longtemps un problème majeur pour les développeurs Web. Les différences entre les spécifications formelles, les normes factuelles et diverses implémentations ont fait souffrir de nombreux développeurs jour et nuit. À cette fin, la compatibilité JavaScript de IE et Firefox est principalement résumée à partir des différences suivantes:
La copie de code est la suivante:
1. Différences entre les fonctions et les méthodes;
2. Accès et paramètres de style;
3. Méthode DOM et référence d'objet;
4. Gestion des événements;
5. Traitement de compatibilité pour d'autres différences.
1. Différences entre les fonctions et les méthodes
1. Méthode Getyear ()
[Instructions d'analyse] Jetons un coup d'œil au code suivant:
La copie de code est la suivante:
var année = new Date (). Getyear ();
Document.Write (année);
La date à laquelle vous obtenez IE est "2010", et la date que vous voyez dans Firefox est "110", principalement parce que dans Firefox Getyear renvoie la valeur de "l'année en cours 1900".
【Traitement de compatibilité】 Ajouter au juge de l'année, comme:
La copie de code est la suivante:
var année = new Date (). Getyear ();
année = (année <1900? (1900 + an): an);
Document.Write (année);
Vous pouvez également l'appeler via Gettilement GetUtculyar:
La copie de code est la suivante:
var année = new Date (). Gettillyear ();
Document.Write (année);
2. Fonction Eval ()
[Remarque d'analyse] Dans IE, vous pouvez utiliser EVAL ("IDNAME") ou GetElementById ("idName") pour obtenir des objets HTML avec IDNAME; Dans Firefox, vous ne pouvez utiliser GetElementById ("idName") que pour obtenir des objets HTML avec IDNAME.
[Traitement de compatibilité] Utilisez GetElementById ("IDNAME") pour obtenir un objet HTML avec IDNAME avec IDNAME.
3. Déclaration de const
[Remarque d'analyse] Le mot-clé const ne peut pas être utilisé dans IE. comme:
La copie de code est la suivante:
const var = 32;
Dans IE, c'est une erreur de syntaxe.
【Traitement compatible】 N'utilisez pas const, utilisez VAR à la place.
4. var
[Instructions d'analyse] Veuillez consulter le code suivant:
La copie de code est la suivante:
echo = fonction (str) {
Document.Write (STR);
}
Cette fonction s'exécute normalement sur IE, mais une erreur a été signalée sous Firefox.
[Traitement compatible] Il est normal d'ajouter VAR avant l'écho, et c'est le but de notre mention de VAR.
5. Problème const
[Remarque d'analyse] Le mot-clé const ne peut pas être utilisé dans IE. Par exemple, const var = 32; Dans IE, c'est une erreur de syntaxe.
【Solution】 N'utilisez pas de const, utilisez VAR à la place.
2. Accès et paramètres de style
1. L'attribut "float" de CSS
[Remarque d'analyse] La syntaxe la plus élémentaire pour JavaScript pour accéder à une valeur CSS donnée est: object.style.property, mais certaines propriétés CSS sont les mêmes que les noms de mots réservés dans JavaScript, tels que "float", "pour", "classe", etc., et les méthodes d'écriture sont différentes de différents navigateurs.
Dans IE, écrivez ceci:
La copie de code est la suivante:
document.getElementById ("En-tête"). style.stylefloat = "Left";
Dans Firefox, écrivez ceci:
La copie de code est la suivante:
document.getElementById ("En-tête"). Style.cssfloat = "Left";
[Traitement de compatibilité] Ajoutez un jugement avant d'écrire pour déterminer si le navigateur est IE:
La copie de code est la suivante:
if (document.all) {//
document.getElementById ("En-tête"). style.stylefloat = "Left";
}
else {// non défini quand pas c'est-à-dire
document.getElementById ("En-tête"). Style.cssfloat = "Left";
}
2. Accès "pour" dans la balise <baling>
[Remarque d'analyse] Comme l'attribut "float", il nécessite également l'utilisation de la distinction de syntaxe invisible pour accéder "pour" dans la balise <label>.
Dans IE, écrivez ceci:
La copie de code est la suivante:
var myObject = document.getElementById ("myLabel");
var myAttribute = myObject.getAttribute ("htmlfor");
Dans Firefox, écrivez ceci:
La copie de code est la suivante:
var myObject = document.getElementById ("myLabel");
var myAttribute = myObject.getAttribute ("pour");
[Traitement de compatibilité] La solution consiste à déterminer d'abord le type de navigateur.
3. Accès et régler les propriétés de classe
[Remarque d'analyse] également parce que la classe est des mots réservés JavaScript, ces deux navigateurs utilisent différentes méthodes JavaScript pour obtenir cette propriété.
Comment écrire toutes les versions IE avant IE8.0:
La copie de code est la suivante:
var myObject = document.getElementById ("En-tête");
var myAttribute = myObject.getAttribute ("className");
Applicable à IE8.0 et à Firefox Writing:
La copie de code est la suivante:
var myObject = document.getElementById ("En-tête");
var myAttribute = myObject.getAttribute ("classe");
De plus, lors de la définition de l'attribut de classe à l'aide de setAttribute (), les deux navigateurs ont également la même différence.
La copie de code est la suivante:
setAttribute ("className", valeur);
Cette méthode d'écriture est applicable à toutes les versions IE avant IE8.0. Remarque: IE8.0 ne prend pas en charge l'attribut "ClassName".
setAttribute ("classe", valeur); convient à IE8.0 et à Firefox.
【Traitement compatible】
Méthode 1, écrivez les deux:
La copie de code est la suivante:
var myObject = document.getElementById ("En-tête");
myObject.SetAttribute ("class", "classValue");
myObject.SetAttribute ("className", "classValue");
// Définissez la classe d'en-tête sur classValue
Méthode 2: IE et FF Support Object.ClassName, afin que vous puissiez l'écrire comme ceci:
La copie de code est la suivante:
var myObject = document.getElementById ("En-tête");
myObject.className = "classValue"; // Définissez la classe d'en-tête sur classValue
Méthode 3: Jugez 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 la largeur de l'objet et de la hauteur
[Remarque d'analyse] L'énoncé similaire à obj.style.height = imgobj.height dans Firefox n'est pas valide.
【Traitement compatible】 Utiliser obj.style.height = imgobj.height + 'px';
5. Ajouter des styles
[Remarque d'analyse] Dans IE, utilisez la méthode addrule () pour ajouter des styles, tels que: StylesHeet.Addrule ("P", "Color: #ccc", Stylesheet.length). Cependant, cette méthode n'est pas compatible avec FF et utilise la méthode d'insestule () pour la remplacer en FF. Comme Stylesheet.insertrule ("p {couleur: #ccc}", Stylesheet.length).
【Traitement compatible】
La copie de code est la suivante:
if (Stylesheet.insertrule) {
// méthode insertrule ()
}autre{
// Méthode addrule ()
}
6. style final
[Note d'analyse] Parfois, nos styles personnalisés échoueront car le chevauchement du style se produit, comme le style défini par un sélecteur de classe et le style défini par un sélecteur d'étiquette, et ce dernier est invalide à ce moment. Ensuite, le style final doit être utilisé. Le style final dans IE est écrit comme ele.currentStyle. nom d'attribut. La méthode d'écriture standard dans DOM est d'utiliser Document.DefaultView objet, tel que document.defaultView.getCompuledStyle (Elel, NULL), qui est compatible avec FF.
[Traitement de compatibilité] juge d'abord le navigateur (document.all), puis exécuter la méthode ci-dessus.
3. Méthode DOM et référence d'objet
1. GetElementByid
[Instructions d'analyse] Jetons un coup d'œil à un ensemble de codes:
<! - Accès d'objet d'entrée 1 ->
La copie de code est la suivante:
<bouton ID Input id = "id" Type = "
value = "Cliquez moi" ōnclick = "alert (id.value)" />
Dans Firefox, le bouton ne répond pas, dans IE, c'est bien, car pour IE, l'ID d'un élément HTML peut être utilisé directement comme un nom de variable dans le script, mais pas dans Firefox.
[Traitement de compatibilité] Essayez d'utiliser l'écriture DOM W3C. Lorsque vous accédez aux objets, utilisez Document.GetElementById ("ID") pour accéder à l'objet avec ID, et un ID doit être unique dans la page. De plus, lorsque vous accédez aux objets avec un nom de balise, utilisez Document.getElementsByTagName ("div") [0]. Cette méthode est prise en charge par plus de navigateurs.
<! - Accès d'objet d'entrée 2 ->
La copie de code est la suivante:
<entrée id = "id" type = "bouton" value = "cliquez sur moi"
onClick = "alert (document.getElementById ('id'). valeur)" />
2. Accès d'objet de classe de collecte
[Remarque d'analyse] Sous IE, vous pouvez utiliser () ou [] pour obtenir l'objet de classe de collection; Sous Firefox, vous ne pouvez utiliser [] que pour obtenir l'objet de classe de collecte. comme:
document.write (document.forms ("formName"). Src);
// cette méthode d'écriture peut accéder à l'attribut SCRC de l'objet formulaire sous IE
【Traitement de compatibilité】 Change Document.Forms ("FormName") à Document.Forms ["FormName"]. Utiliser [] pour obtenir des objets de classe de collecte de manière unifiée.
3. Référence du cadre
[Remarque d'analyse] IE peut accéder à l'objet Window correspondant à cette trame via l'ID ou le nom, tandis que Firefox ne peut accéder qu'à l'objet de fenêtre correspondant à ce cadre via le nom.
Par exemple, si la balise de trame ci-dessus est écrite dans le HTM dans la fenêtre supérieure, vous pouvez y accéder comme ceci:
Ie: window.top.frameid ou window.top.framename pour accéder à cet objet Window;
Firefox: uniquement Window.top.framename peut être utilisé pour accéder à cet objet de fenêtre.
【Traitement compatible】 Utilisez le nom du trame pour accéder aux objets de trame. De plus, IE et Firefox peuvent être utilisés pour faire
window.Document.getElementById ("frameid") pour accéder à cet objet de trame.
4. Parentementation
[Description de l'analyse] IE prend en charge l'utilisation de Parentelement et ParentNode pour obtenir des nœuds parents. Firefox ne peut utiliser ParentNode.
[Traitement de compatibilité] Parce que Firefox et IE prennent en charge DOM, ParentNode est utilisé pour accéder au nœud parent.
5. Fonctionnement de la table
[Remarque d'analyse] Dans le tableau sous IE, qu'il soit inséré avec innerhtml ou appenchild, il n'a aucun effet, mais d'autres navigateurs l'affichent normalement.
[Traitement compatible] La solution consiste à ajouter <tr> à l'élément <TBOBY> de la table, comme indiqué ci-dessous:
La copie de code est la suivante:
var row = document.CreateElement ("tr");
var cell = document.CreateElement ("TD");
var cell_text = document.createTextNode ("Contenu inséré");
Cell.ApendChild (Cell_text);
Row.ApendChild (cellule);
document.getElementsByTagName ("TBODY") [0] .APPENDCHILD (ROW);
6. Retirez les nœuds removenode () et removechild ()
[Remarque d'analyse] APPENDNODE peut être utilisé normalement dans IE et Firefox, mais Removenode ne peut être utilisé que dans IE.
La fonction de la méthode Removenode est de supprimer un nœud, la syntaxe étant Node.reMovenode (false) ou Node.reMovenode (true), et la valeur de retour est le nœud supprimé.
Removenode (false) signifie que seul le nœud spécifié est supprimé, 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œud enfant et de nœud parent.
[Traitement de compatibilité] Les nœuds dans Firefox n'ont pas de méthode Removenode, ils ne peuvent donc être remplacés que par la méthode RemoveChild. Revenez d'abord au nœud parent et retirez le nœud à supprimer du nœud parent.
Node.parentNode.RemoveChild (Node);
// Pour utiliser à la fois IE et Firefox normalement, prenez le nœud parent de la couche précédente, puis retirez.
7. Nœuds obtenus par ChildNodes
[Remarque d'analyse] La signification de l'indice de NICHNODES est différente dans IE et Firefox. Jetons un coup d'œil au code suivant:
La copie de code est la suivante:
<ul id = "main">
<li> 1 </li>
<li> 2 </li>
<li> 3 </li>
</ul>
<entrée type = Button Value = "Cliquez sur moi!" onClick =
"alert (document.getElementById ('main'). childnodes.length)">
En fonctionnant avec IE et Firefox respectivement, le résultat de IE est de 3, tandis que Firefox est 7. Firefox utilise la spécification DOM, et "#Text" signifie que le texte (en fait des espaces et des pauses de ligne, etc.) sera également analysé dans un nœud dans Firefox. Dans IE, seul le texte avec une signification pratique sera analysé en "#Text".
【Traitement compatible】
Méthode 1: Lors de l'obtention de nœuds enfants, vous pouvez éviter ce problème par node.getElementsByTagName (). Cependant, GetElementsByTagname n'est évidemment pas aussi bon que l'utilisation de NICHNODES pour parcourir les structures DOM complexes, car ChildNodes peut mieux gérer la hiérarchie DOM.
Méthode 2. Dans une utilisation réelle, lorsque Firefox traversant les nœuds enfants, vous pourriez aussi bien l'ajouter à la boucle pour:
if (childNode.NodeName == "# text") Continuer; // ou utiliser nodeType == 1.
Cela vous permet de sauter quelques nœuds de texte.
Dès la lecture
"Différence entre les notes d'enfants dans IE et Firefox"
8. Firefox ne peut pas prendre en charge le texte intérieur
[Note d'analyse] Firefox ne prend pas en charge InnerText, il prend en charge TextContent pour implémenter InnerText, mais TextContent ne considère pas les éléments comme InnerText, il n'est donc pas complètement compatible avec IE. Si vous n'utilisez pas TextContent, la chaîne ne contient pas de code HTML, qui peut également être remplacé par InnerHTML. Vous pouvez également rédiger une méthode pour l'implémenter, veuillez vous référer à l'article "Implémentation d'attribut InnerText pour Firefox".
【Comparez le traitement】 Comparez en jugeant le type de navigateur:
La copie de code est la suivante:
if (document.all) {
document.getElementById ('élément'). innerText = "Mon texte";
} autre{
document.getElementById ('élément'). 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 différents navigateurs. Il existe trois modèles d'événements JavaScript principaux (voir "Prendre en charge trois modèles d'événements à la fois", qui sont NN4, IE4 + et W3C / Safar.
1. Window.Event
【Instructions d'analyse】 Regardez d'abord un morceau de code
La copie de code est la suivante:
fonction et ()
{
alert (événement); // ie: [objet]
}
Le résultat du code ci-dessus exécuté dans IE est [objet], mais il ne peut pas être exécuté dans Firefox.
Étant donné que l'événement peut être utilisé directement comme propriété d'un objet de fenêtre dans IE, mais dans Firefox, le modèle W3C est utilisé, qui propage les événements via la méthode de passage des paramètres, c'est-à-dire que vous devez fournir une interface de réponse d'événement pour votre fonction.
[Traitement de compatibilité] Ajoutez le jugement de l'événement et obtenez le bon événement selon le navigateur:
La copie de code est la suivante:
fonction et ()
{
evt = evt? evt: (window.event? window.event: null);
// compatible avec IE et Firefox
alerte (EVT);
}
2. Acquisition de la valeur du clavier
[Remarque d'analyse] Les méthodes d'obtention des valeurs du clavier à partir de IE et de Firefox sont différentes. On peut comprendre que l'événement. Qui sous Firefox est équivalent à l'événement. KeyCode sous IE. Pour les différences de chacun, veuillez vous référer au "test de compatibilité pour Keycode, qui et Charcode dans les événements du clavier"
【Traitement compatible】
La copie de code est la suivante:
fonction myKeepress (evt) {
// compatible avec IE et Firefox pour obtenir un objet KeyboardEvent
evt = (evt)? EVT: ((Window.Event)? Window.Event: "")
// compatible avec IE et Firefox pour obtenir la valeur clé de l'objet clavier
var key = evt.KeyCode? evt.KeyCode: evt.which;
if (evt.ctrlkey && (key == 13 || key == 10)) {
// Ctrl et Entrée ont été pressés en même temps
// faire quelque chose;
}
}
3. Obtention de la source d'événement
[Remarque d'analyse] Lorsque vous utilisez des délégués d'événements, nous pouvons déterminer quel élément l'événement provient de l'acquisition de la source d'événements. Cependant, dans IE, l'objet Event a une propriété Srcelement, mais aucune propriété cible; Dans Firefox, l'objet uniforme a une propriété cible, mais pas de propriété Srcelement.
【Traitement compatible】
La copie de code est la suivante:
ele = fonction (evt) {// capture l'objet que l'événement actuel agit
evt = evt || window.event;
Retour
(obj = event.srcelement? event.srcelement: event.target;);
}
4. Surveillance des événements
[Remarque d'analyse] En termes d'écoute et de traitement des événements, IE fournit deux interfaces: attachEvent et Detachevent, tandis que Firefox fournit AddEventListener et DeVoveEventListener.
[Traitement de compatibilité] Le traitement de compatibilité le plus simple consiste à résumer ces deux ensembles d'interfaces:
La copie de code est la suivante:
fonction addevevent (elem, eventname, gestionnaire) {
if (elem.attachevent) {
elem.attachevent ("on" + eventname, function () {
handler.call (elem)});
// Utilisez la fonction de rappel Call () ici, laissez ce point vers Elem
} else if (elem.addeventListener) {
elem.addeventListener (EventName, Handler, False);
}
}
Fonction SupporEvent (Elem, EventName, Handler) {
if (elem.detachevent) {
elem.detachevent ("on" + eventname, function () {
handler.call (elem)});
// Utilisez la fonction de rappel Call () ici, laissez ce point vers Elem
} else if (elem.reMoveEventListener) {
elem.reMoveEventListener (Eventname, Handler, False);
}
}
Il convient de noter que sous Firefox, cela dans la fonction de gestion des événements pointe vers l'élément écouté lui-même, mais dans IE, vous pouvez utiliser l'appel de la fonction de rappel pour permettre au contexte actuel de pointer de l'élément écouté.
5. Position de la souris
[Note d'analyse] Sous IE, l'objet uniforme a des attributs x et y, mais pas d'attributs pagex et pagey; Sous Firefox, l'objet uniforme a des attributs pagex et pagey, mais pas d'attributs x et y.
[Traitement de compatibilité] Utilisez MX (MX = Event.x? Event.x: Event.Pagex;) pour remplacer Event.x sous IE ou Event.Pagex sous Firefox. La position absolue doit être considérée en points complexes
La copie de code est la suivante:
fonction getAbSpoint (e) {
var x = e.offsetleft, y = e.offsetTop;
while (e = e.offsetparent) {
x + = e.offsetLeft;
y + = e.offsetTop;
}
alert ("x:" + x + "," + "y:" + y);
}
5. Traitement de compatibilité d'autres différences
1. Xmlhttprequest
[Remarque d'analyse] New ActiveXObject ("Microsoft.xmlhttp"); Fonctionne uniquement dans IE. Firefox ne le prend pas en charge, mais prend en charge XMLHTTPRequest.
【Traitement compatible】
La copie de code est la suivante:
function createExhr () {
var xhr = null;
if (window.xmlhttprequest) {
xhr = new activeXObject ("msxml2.xmlhttp");
}autre{
essayer {
xhr = new activeXObject ("Microsoft.xmlhttp");
}
attraper() {
xhr = null;
}
}
si (! xhr) retourner;
retour xhr;
}
2. Windows modal et non modal
[Remarque d'analyse] Dans IE, les fenêtres modales et non modales peuvent être ouvertes via ShowModaldialog et ShowModelessDialog, mais Firefox ne les soutient pas.
[Solution] Utilisez Window.Open (PageUrl, Name, Paramètres) pour ouvrir une nouvelle fenêtre. Si vous avez besoin de passer des paramètres, vous pouvez utiliser un cadre ou un iframe.
3. Problème d'attribut d'entrée.
La propriété d'entrée. Sous IE est en lecture seule, mais elle peut être modifiée sous Firefox.
4. Fonctionnement de l'option sur l'élément sélectionné
Définir les options, IE et Firefox sont écrites différemment:
Firefox: peut être réglé directement
La copie de code est la suivante:
option.text = 'fooooooooo';
C'est-à-dire: seul
La copie de code est la suivante:
option.innerhtml = 'fooooooo';
Méthode pour supprimer une option de sélection:
Firefox: oui
La copie de code est la suivante:
select.options.remove (selectedIndex);
IE7: peut être utilisé
La copie de code est la suivante:
select.options [i] = null;
IE6: Besoin d'écrire
La copie de code est la suivante:
select.options [i] .outerhtml = null;
5. Analyse des objets IMG alt et titre
[Remarque d'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 que la charge est incorrecte.
Titre: La description de la pointe de la photo. Si le titre n'est pas défini dans IE, ALT peut également être utilisé comme pointe d'IMG, mais dans Firefox, les deux sont utilisés exactement selon la définition de la norme.
Lors de la définition d'un objet IMG.
[Traitement compatible] Il est préférable d'écrire tous les objets Alt et Title pour s'assurer qu'ils peuvent être utilisés normalement dans divers navigateurs.
6. Problème de rafraîchissement SRC d'IMG
[Instructions d'analyse] Jetons un coup d'œil au code d'abord:
La copie de code est la suivante:
<img id = "pic" onclick = "this.src = 'a.jpg'" src = "aa.jpg" style = "curseur: pointeur" />
Sous IE, ce code peut être utilisé pour actualiser les images, mais pas sous Firefox. C'est principalement un problème de mise en cache.
[Traitement de compatibilité] L'ajout d'un nombre aléatoire après l'adresse le résoudra:
La copie de code est la suivante:
<img id = "pic" onclick = "javascript: this.src = this.src + '?' + math.random ()" src = "a.jpg" style = "curseur: pointer" />
Résumer
Il existe de nombreuses différences de JavaScript entre IE et Firefox. Pour être compatible, je pense qu'il est nécessaire d'organiser certains communs dans une bibliothèque JS, tels que les opérations DOM, le traitement d'événements, les demandes XMLHTTPRequest, etc., ou vous pouvez également choisir d'utiliser certaines bibliothèques existantes (telles que jQuery, Yui, Extjs, etc.). Cependant, je pense qu'il est encore nécessaire de comprendre ces différences, ce qui nous est très utile de participer au code de compatibilité et d'utilisation.
Il y a toujours plus de solutions que de problèmes. Peu importe comment le navigateur est compatible, le développement frontal peut toujours être résolu!