2011-11-29 16 views
5

Ho una pagina che inizia come segue:Javascript per afferrare i commenti JavaScript all'interno <head>

<html> 
     <head> 
     <!-- 12036,2011-11-29/11:02 --> 
     <title>Products & Services</title> 

vorrei afferrare il numero 12036 qui e di visualizzarlo all'interno di un DIV posizionato in modo assoluto in basso a destra della mia schermo. La mia intenzione qui è quella di usarlo come bookmarklet o come script Greasemonkey.

Lo scopo di questo è che il numero rappresenta un ID PAGE che utilizziamo riferimento internamente.

Ho cominciato utilizzando:

var x = document.getElementsByTagName('head').innerHTML; 

ma non ho potuto progredire ulteriormente.

Qualcuno può assistere qui?

+3

Sei in grado di modificare il modo in cui la pagina viene servita? Cioè, se ne sei capace, puoi cambiare il modo in cui questo valore è incluso nel tuo documento? Perché sei sicuro di renderti difficile per te adesso. –

+1

No purtroppo. La testina fa parte di un modello CMS e la rielaborazione dell'ordine/sintassi della testa sarebbe piuttosto complessa. Considerando che la mia richiesta è per un bisogno piuttosto che un bisogno, trascorrendo molte ore lavorative su ciò che non volerà agli occhi dei decisori. – rlsaj

risposta

6

Ciò funzionerà nel browser più recenti, ma sarà necessario modificarlo in base alle browser più vecchi ...

var commentNode = [].slice.call(document.head.childNodes).filter(function(node) { 
      return node.nodeType == 8; 
      })[0], 
    id = commentNode.data.match(/^\s*(\d+)/)[1]; 

per posizionarlo nell'angolo inferiore dello schermo ...

var elem = document.createElement('div'); 

elem.id = 'id-display'; 

elem.appendChild(document.createTextNode(id)); 

document.body.appendChild(elem); 

... e un tocco di CSS ...

#id-display { 
    position: fixed; 
    bottom: 0; 
    right: 0; 
    background: #333; 
    color: #fff; 
    padding: 6px; 
} 

JSBin.

+1

+1 Risposta migliore della mia, in realtà si analizza il numero e si usa la roba dolce di es5. Lo shim ES5 dovrebbe comunque risolvere la maggior parte dei problemi legacy quindi non mi preoccuperei di ciò. – Incognito

+0

@Incognito: Sì, che e 'document.head' non esiste ovunque o' position: fixed' non funziona in IE più vecchi. Ho pensato che questo sarebbe stato OK visto che l'OP vuole che questo codice aiuti nello sviluppo. – alex

+0

Fantastico, grazie Alex ed è stato semplicissimo da implementare. – rlsaj

1

getElementsByTagName restituisce un array di elementi. Prima di poter ottenere innerHTML o altro, dovrai afferrare il primo elemento di quell'array.

document.getElementsByTagName('head')[0].innerHTML 

Invece di utilizzare innerHTML si può prendere in considerazione l'utilizzo .childNodes e il collegamento in cascata di trovare nodi di commenti.

+2

Questa è solo l'intera rappresentazione della stringa del tag head, non solo i commenti. – Incognito

+0

Esatto, ecco perché ho aggiunto l'ultimo bit su '.childNodes'.Potrebbe essere stato modificato mentre hai commentato. –

2

Si desidera selezionare qualsiasi elemento che si sta lavorando con, consente di chiamare var ele;

var div = document.getElementsByTagName('div')[0]; 

Poi si vuole afferrare un array di tutti i nodi figlio all'interno ele, così var nodes = div.childNodes;

Poi si ciclo tra loro per il loro tipo di nodo, che per i commenti è "8" as per the spec.

for (var i=0; i<nodes.length; i++){ 
    if (nodes[i].nodeType === 8) { 
     //Only comments go out to console. 
     console.log(nodes[i]); 
    }1 
} 

Here's a demo for you.

Si prega di notare che siete NEVER TO EVER PARSE HTML WITH A REGULAR EXPRESSION.

+0

Grazie per l'avviso" Never Parse "in incognito! – rlsaj

Problemi correlati