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 :
.
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 :
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
{
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 :
{
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】
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】
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 :
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
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
option.text = 'fooooooooo';
IE : peut uniquement être défini
option.innerHTML = 'fooooooo';
Méthode pour supprimer une option sélectionnée :
Firefox : Oui
select.options.remove(selectedIndex);
IE7 : Il peut être utilisé
select.options[i] = null;
IE6 : Besoin d'écrire
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 :
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 :
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 !
