Interagir avec DOM pour les pages Web AJAX?

hey les gars, je n'ai pas l'habitude de développer des extensions, mais je le fais pour apprendre. Je voudrais faire une extension qui bloque seulement certaines icônes de Twitter. En regardant à travers ce tutorial j'ai compris beaucoup. Je suis capable de tweets à partir du DOM, vérifier le nom d'utilisateur, et désactiver l'affichage de cette image avec JavaScript.Interagir avec DOM pour les pages Web AJAX?

J'obtenu loin en créant une fausse page, nous allons l'appeler twitter.html, qui ressemble un peu à ceci:

<html> 
    <div class="stream-item" data-item-type="tweet"> 
     <div class="tweet-image"> 
      <img src="abc.jpg" data-user-id="1234"> 
     </div> 
    </div>

.....

<script src="utility.js"></script> 
<script type="text/javascript"> 
var tweets = getElementsByClass("tweet"); 
for (var i = 0; i < tweets.length; i++) { 
    var tweet = tweets[i]; 
    var name = tweet.getAttribute("data-screen-name"); 
    if (name.toLowerCase() == 'some-username'.toLowerCase()) { 
     var icon = tweet.getElementsByTagName("img")[0]; 
     icon.style.display='none'; 
    } 
} 

</script> 

</html>

Alors cacher les images ne sont pas le problème, mais obtenir le coe pour courir au bon moment est. J'utilise Safari extension builder qui me permet de fournir une page principale, ainsi que des fichiers js avant et après chargement. Cependant, le chargement de la page est "terminé" avant que les tweets ne soient chargés à cause des trucs AJAX que le vrai twitter.com utilise.

Comment faire pour que mon code js s'exécute après que les tweets ont été chargés?

Source

2010-12-04 Derrick

Le code fourni suppose que toutes les données sont chargées. Qu'est-ce qui charge les données? Si vous utilisez l'API de quelqu'un d'autre, ils vous ont probablement fourni un moyen de vous connecter à un événement «complet». – mqsoh

Merci pour la réponse. Oui exactement cela suppose que toutes les données sont chargées. Tout cela est à peu près d'appliquer un style à certains éléments. Je n'utilise aucune API autre que le 'Document Object Model' de la page. J'essaie juste de le faire via une extension. Très similaire à l'extension [Facebook Neue] (http://soggysh.it/facebook-neue/) – Derrick

Pour répondre à votre question sur ce qui charge les données: Lorsque le navigateur va sur twitter.com, je suppose qu'il est servi une page avec du javascript qui se charge rapidement. Alors ce javascript fait probablement un tas de demandes HTTP asynchrones pour charger les tweets. Ne prenez pas cela comme 100% précis, parce que je ne suis pas un développeur web, et je sais très peu de choses sur ce sujet. – Derrick

Vous devriez écouter le DOMNodeInserted, qui est appelé ... bien, chaque fois qu'un noeud DOM est inséré :) Une fois reçu, vérifiez si le noeud est d'un type qui vous intéresse, et continuez à partir de là.

J'ai pris la liberté de modifier votre code pour accommoder les changements. J'ai testé avec succès dans Chrome.

window.addEventListener("DOMNodeInserted", 
    function(event){ 
     var streamItem = event.target; 
     if (streamItem == null) 
      return; 

     if (streamItem.getAttribute('class') != 'stream-item') 
      return; 

     var tweet = streamItem.getElementsByClassName("tweet",streamItem)[0]; 
     var name = tweet.getAttribute("data-screen-name"); 
     if (name.toLowerCase() == 'some-username'.toLowerCase()) 
     { 
      var icon = tweet.getElementsByTagName("img")[0]; 
      icon.style.display='none'; 
     } 
    }, 
    false);

Source

2010-12-04 08:43:02 Sasha

Merci beaucoup. Ça marche! – Derrick

Pas de problème, profitez-en! – Sasha

Interagir avec DOM pour les pages Web AJAX?

Répondre

Questions connexes