Topic: [JS Script] Analizzare DOM di una pagina non aperta.

[Borgata]

Spero di aver azzeccato la sezione giusta.
In effetti si tratta di uno script applicabile ad alcune estensioni, e nello specifico a firegestures.

Sto realizzando uno script, e ho necessità di recuperare un attributo da un elemento di una pagina (in realtà di più pagine, con indirizzi generati di volta in volta).
Il problema è che questa pagina non è aperta sul browser, ma ne ho l'indirizzo.

Quindi il classico uso di document non è fattibile, e mi chiedevo se ci fosse un modo per avere a disposizione il DOM di queste pagine senza aprirle realmente per recuperare questo dato.

Ho provato a cercare, ma senza successo, per cui spero che qualcuno di voi saprà indirizzarmi a dovere.

[klades]

Un modo per risolvere è usare l'oggetto XMLHttpRequest, vedi queste pagine:
https://developer.mozilla.org/en/XMLHttpRequest
https://developer.mozilla.org/En/XMLHttpRequest/Using_XMLHttpRequest

[Borgata]

Ottimo, l'oggetto sembra proprio fare al caso mio.

Ho solo un dubbio sulla pesantezza del tutto: dovrò fare molte richieste e non vorrei che lo script piantasse tutto.
Sai per caso se è possibile, per esempio, alleggerire la richiesta evitando che vengano caricate immagini ed elementi esterni? A me in fondo basta solo una parte del codice html della pagina.

Più tardi darò comunque un'occhiata più approfondita, ma se nel mentre puoi darmi conferma (o qualche suggerimento) per questa cosa, sarebbe già un ottimo punto di inizio!

Grazie!

[klades]

Ho solo un dubbio sulla pesantezza del tutto: dovrò fare molte richieste e non vorrei che lo script piantasse tutto.

Se usi la chiamata asincrona (e la devi usare!!!), non ci sarà alcun blocco nell'esecuzione dello script, nè alcun blocco nell'interfaccia.
Ovvio però che molte richieste (quante?) richiedono comunque un uso di risorse di rete.

Sai per caso se è possibile, per esempio, alleggerire la richiesta evitando che vengano caricate immagini ed elementi esterni? A me in fondo basta solo una parte del codice html della pagina.

Non viene caricata alcuna immagine, nè alcun oggetto: in pratica è una richiesta di tipo GET, quindi otterrai solo il codice (X)HTML e nient'altro. E' la stessa identica cosa che succede quando usi la funzione di visualizzazione del codice sorgente.
La cosa molto utile è che puoi ottenere il risultato sia in forma testuale, che come oggetto document.

[Borgata]

Perfetto, mi sembra sia proprio come serve a me.
Nella mia niubbaggine credevo cercasse di caricare la pagina per intero :p

Avevo oltretutto il dubbio che in versione asincrona
- interrompesse una richiesta precedente nel caso non fosse stata completata
- cercasse di eseguire il codice successivo senza verificare che il caricamento sia stato completato, con ovvie conseguenze...

Questi giorni credo avrò il tempo di fare alcune prove.
Grazie ancora per l'aiuto!

[Borgata]

Dopo alcune prove posso dire di non essere riuscito a passare la richiesta generata con XMLHttpRequest al resto del codice.

Evidentemente non riesco a farmi restituire i dati come oggetto document, per poter utilizzare i metodi che mi consentono di trovare l'elemento con l'id che cerco.

Qualche suggerimento?

[klades]

Prima di tutto ti consiglio di fare le prove non da una pagina web "normale", ma dall'estensione, perché altrimenti non ti funzionerà.
Puoi farmi un esempio concreto di ciò che cerchi di fare?

[Borgata]

Si si sto facendo le prove direttamente dall'estensione.
A dire il vero ho provato un po' di tutto, anche a riscrivere il contenuto di document tramite innerHTML, ma era in effetti una cosa un po' azzardata.

Fondamentalmente la richiesta viene esaudita correttamente, infatti il metodo responseText restituisce il codice della pagina.
Credevo quindi che utilizzando il metodo responseXML avrei ottenuto un oggetto su cui applicare i metodi del DOM come getElementById, ma evidentemente ero troppo ottimista!

Appena ho una attimo sistemo un po' di codice per riportarlo qui.
Ma se nel mentre hai già intuito qualche idiozia segnala pure!


PS: tra l'altro ho provato ad isolare parte del codice in una funzione e non ne vuole sapere di funzionare, mentre funziona benissimo se lo metto direttamente dentro la funzione richiamata onreadystatechange.
Dal momento che mi sembra una cosa banale, a meno che non ignori io qualcosa sullo scope di JS, comincio a pensare o che ci sia qualche limitazione nell'estensione, o che son proprio un caprone!

[Borgata]

Ecco un po' di codice
Poniamo per esempio di voler recuperare l'indirizzo dell'immagine del logo nella home page di google.

Codice: [Seleziona]

function getURL(req) {
    var baseURL = "http://www.google.it";
    var id_logo = "logo";
    var link = req.responseXML.getElementById(id_logo);
    url = link.getAttribute("src");
    //alert(url); // DEBUG
    return (baseURL+url);
}

var url = "http://www.google.it/";
var req = new XMLHttpRequest();
var result = "";
req.open('GET', url, true); 
req.onreadystatechange = function (aEvt) { 
  if (req.readyState == 4) { 
     if(req.status == 200) {
        result = getURL(req);
        alert(result); // DEBUG
     }
     else 
      throw FireGestures.getLocaleString("ERROR_PAGE_NOT_LOADED");
  } 
};
req.overrideMimeType("text/xml");  // TENTATIVO, vedi nota su responseXML
req.send(null);

[klades]

Scusa, sono io che l'ho fatta troppo semplice, responseXML funziona solo con pagine XML...

Ecco un modo in cui puoi ottenere il risultato che cerchi nell'esempio:

Codice: [Seleziona]

var req = new XMLHttpRequest();
var url = "http://www.google.it";
req.open('GET', url, true); 
req.onreadystatechange = function (aEvt) { 
  if (req.readyState == 4) { 
    if(req.status == 200) {
         var html = req.responseText;

         // L'elemento che segue è solo "virtuale", nel senso che non viene davvero
         // aggiunto alla pagina caricata nel browser, serve solo per caricare il codice
         var parseDOM = content.document.createElement('div');
          parseDOM.appendChild(Components.classes["@mozilla.org/feed-unescapehtml;1"]
          .getService(Components.interfaces.nsIScriptableUnescapeHTML)
          .parseFragment(html, false, null, parseDOM));

          // A questo punto hai tutto il DOM del tag BODY di google.it caricato nel
          // "div" virtuale. Non puoi usare getElementById direttamente,
          // ma questo si può aggirare
          var elements = parseDOM.getElementsByTagName("img");
          for (var i=0;i<elements.length;i++) {
                   var id = elements[i].getAttribute("id");
                   if (id && id == "logo")
                           break;
          }
          var img = elements[i];
           alert(img.src);
        }
        else 
           alert("Error loading page");   
   }
}; 
req.send(null);


[Borgata]

In effetti senza approfondire come funziona il DOM e i metodi per lavorarci su non ci sarei potuto proprio arrivare.
L'idea di fare qualcosa del genere era venuta anche a me, ma l'avevo applicata in maniera un po' barbina non sapendo bene come creare l'elemento virtuale.
Anche perchè firegestures non lavora sulla pagina, e infatti per avere il DOM della pagina devo utilizzare un metodo dell'estensione (di cui non ho però visto i codice):

Codice: [Seleziona]

var doc = FireGestures.sourceNode.ownerDocument;
Hai per caso il link relativo a documentazione che tratta di questo argomento?
Magari qualcosa di semplice, per iniziare, perchè ho già provato a cercare qualcosa ma arrivavo ad un certo punto in cui non capivo più nulla, evidentemente richiedeva basi che non ho!

Ho provato a racchiudere il codice nella funzione getURL e non da alcun problema (chissà invece perchè prima mi smetteva di funzionare... forse problemi legati ad un passaggio forse per indirizzo di req?).

Una piccola domanda: come mai getElementById non funziona?
Nelle prime versioni dello script utilizzavo proprio getElementsByTagName, poi avevo deciso di utilizzare l'altro metodo che mi sembrava decisamente più adatto allo scopo (e presumibilmente più efficiente).

Detto questo... grazie!
Ora credo di avere tutto quello che mi serve per terminare lo script, spero di finire nei prossimi giorni (in fondo devo solo assemblare i pezzi e modificare qualcosina).

PS: ultima cosa: nel mio script volevo far partire direttamente il download di alcune immagini, sono riuscito a creare il codice (ovviamente recuperandolo da estensioni esistenti e modificando qualcosa :p ) ma mi pare abbastanza ingombrante.
Esiste qualcosa di semplice, tipo startDownload(<indirizzo>); ?

PPS: ho notato che lo script non funziona se eseguito su pagina vuota. Infatti non riuscivo a capire perchè facendo le dovute modifiche non funzionasse! :p
Non sarà comunque un problema, tanto lo script andrà eseguito sempre su una pagina non vuota (al più ci aggiungo un alert nel caso lo si tenti su about:blanck ...)

[klades]

Anche perchè firegestures non lavora sulla pagina, e infatti per avere il DOM della pagina devo utilizzare un metodo dell'estensione (di cui non ho però visto i codice):

Codice: [Seleziona]

var doc = FireGestures.sourceNode.ownerDocument;

Non conosco l'estensione, ma ownerDocument ritorna l'oggetto document cui appartiene il nodo da cui è chiamato.

Hai per caso il link relativo a documentazione che tratta di questo argomento?
Magari qualcosa di semplice, per iniziare, perchè ho già provato a cercare qualcosa ma arrivavo ad un certo punto in cui non capivo più nulla, evidentemente richiedeva basi che non ho!

I link sono quelli che ti ho dato sopra.
Per ogni altra cosa, la migliore fonte è https://developer.mozilla.org

Una piccola domanda: come mai getElementById non funziona?
Nelle prime versioni dello script utilizzavo proprio getElementsByTagName, poi avevo deciso di utilizzare l'altro metodo che mi sembrava decisamente più adatto allo scopo (e presumibilmente più efficiente).

getElementById è un metodo specifico dell'oggetto document, getElementsByTagName lo puoi invece chiamare con qualsiasi elemento HTML

PS: ultima cosa: nel mio script volevo far partire direttamente il download di alcune immagini, sono riuscito a creare il codice (ovviamente recuperandolo da estensioni esistenti e modificando qualcosa :p ) ma mi pare abbastanza ingombrante.
Esiste qualcosa di semplice, tipo startDownload(<indirizzo>); ?

No, non esiste, che io sappia.
Forse (ma dico "forse") puoi provare a usare qualche funzione definita in Firefox, prova a cercare nel file browser.js da mxr.mozilla.org/

PPS: ho notato che lo script non funziona se eseguito su pagina vuota. Infatti non riuscivo a capire perchè facendo le dovute modifiche non funzionasse! :p
Non sarà comunque un problema, tanto lo script andrà eseguito sempre su una pagina non vuota (al più ci aggiungo un alert nel caso lo si tenti su about:blanck ...)

Ti basta inserire un paio di controlli, per evitare valori che causino errori.
Devi controllare che req.responseText contenga qualcosa e che sia effettivamente trovato un oggetto con l'id che cerchi tu.

[Borgata]

I link sono quelli che ti ho dato sopra.
Per ogni altra cosa, la migliore fonte è https://developer.mozilla.org

Capito, trovo tutto in developer.mozilla.org
Avevo sperato in una sorta di Manuale "For Dummies" che spiegasse in modo semplice e discorsivo i concetti principali. Vabbè, sarà un po' più lunga e tortuosa!

getElementById è un metodo specifico dell'oggetto document, getElementsByTagName lo puoi invece chiamare con qualsiasi elemento HTML

Capito. Avevo pensato si ottenesse in quel modo un oggetto document vero e proprio.
Ma è possibile creare un vero e proprio oggetto document (quindi non legato alla pagina) oppure prendere quello esistente e sostituirgli il contenuto con quello ottenuto da httprequest? Più per curiosità che per altro, perchè ho idea che potrebbe on rivelarsi comunque una soluzione efficiente.

No, non esiste, che io sappia.
Forse (ma dico "forse") puoi provare a usare qualche funzione definita in Firefox, prova a cercare nel file browser.js da mxr.mozilla.org/

Ho provato a guardare senza troppi risultati, per il momento è un ambiente troppo estraneo perchè riesca a cavarne qualcosa.
Per il momento utilizzerò il codice che ho sistemato, al più farò qualche prova per vedere se è necessario ricreare tutti gli oggetti e le variabili utilizzate o posso ottimizzare un po' riutilizzandole e cambiando solo alcuni valori, in modo da fare na parte della funzione eseguita una sola volta e un'altra da eseguire per ogni file da mettere in download.
Devo anche gestire in qualche modo la questione del nome file, magari recuperandolo dall'indirizzo o da qualche altro elemento della pagina, perchè il codice che ho io lo richiede esplicitamente. Penso aggiungerò anche un contatore, per evitare problemi con sovrascritture.

Ti basta inserire un paio di controlli, per evitare valori che causino errori.
Devi controllare che req.responseText contenga qualcosa e che sia effettivamente trovato un oggetto con l'id che cerchi tu.

Si, pensavo di fare così. Più che per gestirli, dato che firegesture li gestisce già di suo, era per fare un riscontro diretto del problema all'utilizzatore.

Grazie ancora!

[klades]

Scusa ma mi ero "perso" la discussione

Per quanto riguarda questa tua curiosità

Ma è possibile creare un vero e proprio oggetto document (quindi non legato alla pagina) oppure prendere quello esistente e sostituirgli il contenuto con quello ottenuto da httprequest? Più per curiosità che per altro, perchè ho idea che potrebbe on rivelarsi comunque una soluzione efficiente.

puoi trovare dei metodi qui: https://developer.mozilla.org/en/Code_snippets/HTML_to_DOM#Using_a_hidden_iframe_element_to_parse_HTML_to_a_window%27s_DOM

Devo dirti che entrambi non mi sembrano proprio il massimo e soprattutto credo che raramente sia davvero necessari.

[Borgata]

Riprendo la discussione dopo... beh, direi un bel po' di tempo. 

Dato che di recente mi è servito, ho dovuto rimettere mano allo script, ma ho un problema.
Il problema credo che sia che qualcosa mi sfugge sulle chiamate asincrone, dato che i vari elementi, presi singolarmente funzionano ma, messi insieme... no!

In particolare, ho idea che il problema sia dovuto al fatto che lo script termini prima che arrivino le callback, con il risultato che la pagina non viene aggiornata come dovrebbe.
Avrei fatto una prova "barbara" con un timer, ma il timer in JS è asincrono anche lui, per cui subisce la stessa sorte.

Qualche suggerimento?
Se dovesse servire, posso allegare il codice.