Chiarimenti su addEventListener: "load" e "DOMContentLoaded"

**xdesign** · 27-03-2010, 16:33

Ciao a tutti!

Vi espongo brevemente il mio problema: sto testando un'estensione per Firefox 3+ che utilizza addEventListener per eseguire una certa funzione solo dopo il caricamento della pagina nel browser dell'utilizzatore.
Il problema è che, a giudicare dall'output della funzione, sembra che questa venga eseguita prima, e non dopo il caricamento! O forse sbaglio qualcosa io?

La funzione da eseguire è questa:

codice:

function doSomething(){

			 var abc = document.getElementsByClassName('gb3');
                         alert(abc.length);
}

e viene chiamata tramite:

codice:

window.addEventListener("load", function() {doSomething()}, false);

Ecco cosa succede quando apro il browser per testare l'estensione: compare un alert che mi indica il numero "0". Quindi nessun elemento con classe "gb3" è stato trovato nella pagina, nonostante che esista!

Infatti se, visualizzando la medesima pagina appena caricata, io scrivo nella barra degli indirizzi:

codice:

javascript:var abc=document.getElementsByClassName('gb3'); alert(abc.length);

ecco che compare giustamente la finestra di alert con il numero "1", a indicare che esiste una classe gb3 nella pagina. Ho anche provato a sostituirre load con DOMContentLoaded, ma con il medesimo risultato.

Quindi, o la funzione viene eseguita prima che la pagina sia caricata interamente, oppure viene eseguita correttamente ma per qualche motivo non riesce a fare il suo lavoro.

Se c'è qualche anima buona che ha dei suggerimenti, sono estremamente bene accetti!!

Grazie

**Potacchione** · 27-03-2010, 18:42

Prova a vedere se ti funziona questo e in caso, cosa c'è di diverso

codice:

<html>
<head>
<script>
window.addEventListener("load", function() {    
  alert(document.getElementsByClassName("classe").length);
  document.getElementsByClassName("classe")[0].innerHTML = "contenuto2";
}, false);
</script>
</head>
<body>
<div class="classe">contenuto1<div>
</body>
</html>

**xdesign** · 27-03-2010, 19:12

Ti ringrazio per l'aiuto, purtroppo il tuo codice funziona perfettamente se lo salvo in una pagina html e lo eseguo, mentre invece se lo inserisco nell'estensione (la parte JS) e poi apro la pagina (codice HTML) mi ritorna tramite alert il valore 0 e la parte innerHTML non ha effetto.

**xdesign** · 27-03-2010, 19:24

Aggiungo una cosa, sospetto sempre di più che il codice stia puntando a un documento diverso da quello aperto, e per questo ritorna il valore 0 anche se esiste la classe.

Infatti se nell'estensione al posto di getElementsByClassName inserisco:

codice:

alert(document.getElementsByTagName("*").length);

e poi apro la pagina html

codice:

<html>
<head>
</head>
<body>
<div class="classe">contenuto1</div>
</body>
</html>

mi restituisce il valore 1018, decisamente esagerato per una pagina che ha invece 6 tags!

Qualche idea?

**Potacchione** · 27-03-2010, 19:50

mmm io ho provato come dici tu, ma continua a funzionare :master:
Se riesci a mettere il file online siamo sicuri di fare i test sulla stessa cosa

**xdesign** · 27-03-2010, 20:09

Ottimo, allora qui trovi uno zip che contiene l'estensione e la pagina di prova:

http://www.stormvision.it/estensione.zip

Grazie mille per il tuo tempo!

**xdesign** · 27-03-2010, 21:23

Risolto!!

Così funziona anche nell'estensione:

codice:

window.addEventListener("load", function() { myExtension.init(); }, false);

var myExtension = {
  init: function() {
    var appcontent = document.getElementById("appcontent"); 
    if(appcontent)
      appcontent.addEventListener("DOMContentLoaded", myExtension.onPageLoad, true);
   
  },

  onPageLoad: function(aEvent) {
     var doc = aEvent.originalTarget; 	  
     var abc = doc.getElementsByClassName('classe');
     alert(abc.length);

						 
  }
}

Grazie ancora per l'aiuto

Roberto

Discussione: Chiarimenti su addEventListener: "load" e "DOMContentLoaded"

Strumenti discussione

Ricerca discussione

Visualizza

Chiarimenti su addEventListener: "load" e "DOMContentLoaded"

Permessi di invio