Chrome ne peut pas lire la valeur de style.display

Question

J'ai un problème étrange. J'essaye d'écrire un script GreaseMonkey à exécuter dans Firefox et Google Chrome. Avec Chrome j'ai essayé 2 extensions: "TamperMonkey" et "Blank Canvas Script Handler", principalement parce que mon script vérifie régulièrement une nouvelle version sur un site externe et cela est considéré comme un script inter-site et non autorisé dans Chrome.

Pour vous montrer mon problème, j'écris un exemple simple de test:

// ==UserScript== 
// @name  test 
// @namespace  http://fgs.ericc-dream.fr.nf 
// @description  test gm script 
// @include   http://gaia.fallengalaxy.eu/ 
// @author   ericc 
// @version   0.0.1 
// ==/UserScript== 

/* We attach an event listener to the body tag and trigger the function 
* 'message' each time that an element is inserted in the page */ 
var el = document.body; 
el.addEventListener('DOMNodeInserted', message, false); 

var extraFlag = false; 

function message(event) { 
    /* first we capture the id of the new inserted element 
    * (the one who created the event) */ 
    var objId = event.target.id; 

    /* add an event listener on the map container */ 
    if (objId == "extra") { 
     el = document.getElementById('extra'); 
     el.addEventListener('DOMSubtreeModified',readTest,false); 
     GM_log(el.style.display); 
    } 
} 

function readTest() { 
    el = document.getElementById('extra'); 
    GM_log(extraFlag); 
    GM_log(el.style.display); 
    if ((el.style.display != 'none') && (!extraFlag)) { 
     alert('extra'); 
     extraFlag = true; 
    } else if ((el.style.display == 'none')) { 
     extraFlag = false; 
    } 
} 

l'élément div 'extra' est modifié par la page. Le problème est que Chrome n'est pas capable de lire la valeur de el.style.display et ainsi, extraFlag ne redevient jamais "faux". J'utilise ce drapeau pour éviter d'exécuter le code plusieurs fois, le site est fortement piloté par JavaScript Ce code fonctionne bien dans Firefox!

J'ai essayé d'effectuer une recherche avec Google, mais je ne trouve pas les bonnes réponses. Semble facile de changer la valeur de l'affichage, mais il semble que je suis le seul qui essaie de le lire !!!

je vous écris ce code parce que « DOMAttrModified » est pas pris en charge dans Chrome :-(

Merci d'avance pour votre aide

EricC

Answer 1

Je vais avoir une compréhension du mal exactement ce que . votre question, mais il semble que Chrome peut lire .style.display propriétés très bien, je viens de jeter le code suivant dans un modèle HTML et chargé dans Chrome 10:

<div id="div1"> 
</div> 

<div id="div2" style="display: block;"> 
</div> 

<div id="div3" style="display: inline;"> 
</div> 

<div id="div4" style="display: none;"> 
</div> 

<script type="text/javascript"> 
    alert(document.getElementById("div1").style.display); 
    alert(document.getElementById("div2").style.display); 
    alert(document.getElementById("div3").style.display); 
    alert(document.getElementById("div4").style.display); 

    document.getElementById("div1").style.display = "none"; 

    alert(document.getElementById("div1").style.display); 
</script> 

Le code produit des boîtes 5 'd'alerte' avec la sortie suivante:

• bloc
• en ligne
• ne
• aucun

Il semble Chome lit cette propriété très bien.

Peut-être le problème est que la page Web sur laquelle vous exécutez votre script greasemonkey se comporte différemment dans Chrome que dans Firefox? Se pourrait-il que l'ID de l'élément soit différent, ou l'élément est retiré du DOM au lieu d'être simplement caché? Que se passerait-il si vous modifiez votre fonction avec d'autres contrôles, un peu comme ça?

function readTest() { 
    el = document.getElementById('extra'); 
    if(el) 
    { 
     GM_log(extraFlag); 
     GM_log(el.style.display); 
     if (el.style.display && (el.style.display != 'none') && (!extraFlag)) { 
      alert('extra'); 
      extraFlag = true; 
     } else if ((el.style.display == 'none') || !el.style.display) { 
      extraFlag = false; 
     } 
    } 
    else 
    { 
     GM_log(extraFlag); 
     GM_log("element not present"); 
     extraFlag = false; 
    } 
} 

Cela aide-t-il? Si non, y a-t-il une autre raison pour laquelle vous pourriez penser à pourquoi el.style.display n'évaluerait pas correctement dans Chrome?

Il serait peut-être utile d'en savoir plus sur ce que vous essayez de faire avec votre script, et éventuellement sur la page Web ou le code que vous essayez d'exécuter.

Answer 2

Après plusieurs heures et une tonne de cas de test, je trouve enfin une explication acceptable (mais pas encore une solution!)

Expliquons le scénario:
1 °) l'utilisateur clique sur une icône sur la
2 °) le div # supplémentaire, déjà présent dans la page, est rendu visible en supprimant sa propriété d'affichage (.style.display = "")
3 °) le div # extra est classé par une fonction AJAX avec quelques éléments selon l'icône cliquée par l'utilisateur (plus de 200 éléments dans certains cas)
4 °) l'utilisateur clique sur 5 °) tous les éléments du div # extra sont supprimés
6 °) le div # extra est masqué en mettant la propriété d'affichage à 'none' (.style.display = "none"))

Dans un premier temps, sur Firefox, je événement « DOMAttrModified » sur la div # supplémentaire pour vérifier si la propriété d'affichage a été modifié et réagir en conséquence. Problème, cet événement n'est pas pris en charge sur Chrome !!

Je le remplacer par « DOMSubtreeModified » (ci-joint à div # supplémentaire) qui est pris en charge à la fois par le navigateur .... mais pas exactement de la même manière :-(
Sur Firefox, un événement est déclenché pour chaque modification dans le sous-arbre, mais aussi lorsque l'élément lui-même est modifié.
on Chrome, ils sont un peu plus stricte et événement déclenché uniquement pour modification dans le sous-arbre .... et voici ma question!

Dans Firefox, le premier événement est déclenché au point 2 (dans le scénario) et le dernier au point 6 permettant à ma fonction de lire lorsque le div # extra est caché

Dans Chrome, le premier événement est déclenché au point 3 et se termine au point 5 ... alors lorsque le div # extra est masqué, ma fonction n'est pas appelée et je ne peux pas modifier le drapeau !!!! Maintenant, ou j'ajouterai un écouteur d'événement au corps de la page pour intercepter quand la propriété d'affichage est modifiée, mais cela génèrera beaucoup d'appels à ma fonction, ou le développeur de TamperMonkey a dit hier que son extension du support maintenant "DOMAttrModified" (Chrome) ....

Merci quand même de prendre le temps de comprendre ma question et votre solution proposée

EricC