2010-08-29 4 views
13

Ogni browser che ho osservato crea un elemento <head> accessibile nel DOM anche se non ci sono tag espliciti <head></head> nel markup del documento.Un elemento <head> è sempre disponibile nel DOM, anche se assente nel markup HTML?

Tuttavia, Google Analytics utilizza il seguente codice per l'inserimento di script dinamici:

(function() { 
    var ga = document.createElement('script'); 
    ga.type = 'text/javascript'; 
    ga.async = true; 
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; 
    (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(ga); 
})(); 

la seguente riga:

(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(ga); 

sembra fare una concessione speciale per i casi in cui un elemento <head> non è presente .

Si tratta solo di un caso di estrema retrocompatibilità (ad esempio, per Netscape 4 o simili), o c'è un caso da fare per non assumere che i browser moderni (ad esempio, Internet Explorer 6 e più recenti) avrà sempre accesso ad un elemento <head> nel DOM?

+2

IE6 e anche IE5.5 aggiungono un elemento 'HEAD' se non è presente, altri browser come Safari <= 4 no, forse anche alcune vecchie versioni di Opera IIRC. – CMS

+0

Grazie, CMS! IE 6 è tanto indietro quanto ho supportato da molto tempo, quindi è logico che mi sia appena abituato al browser aggiungendo un '' automaticamente. – Bungle

risposta

13

I moderni browser creano l'elemento principale per te quando necessario.

Ma supponendo che il client lo faccia non è intelligente se si desidera che il codice sia a prova di proiettile. Quindi i googler sono conservatori e al sicuro.

La clausola aggiuntiva nella loro istruzione è de minimus, ma aggiunge ulteriore affidabilità. Quindi è una buona cosa.

ps Buon lavoro sulla domanda e tirando fuori il codice rilevante.

Aggiunto:

Il HTML spec dice che il tag head è opzionale. Non penso che la creazione del capo "elemento" nella dom sia richiesta dalle specifiche. Google non vuole (e non dovrebbe) contare sul fatto che sia lì.

+2

La specifica HTML 4.01 dice che è richiesto l'elemento head * *. Solo i * tag * sono opzionali. Vedi http://www.w3.org/TR/1999/REC-html401-19991224/struct/global.html#edef-HTML. I browser, naturalmente, spesso non seguono le specifiche e se creano automaticamente l'elemento principale, sarà perché un numero significativo di pagine Web del mondo reale si rompono in browser che non lo fanno. – Alohci

+0

@ Alochi - grazie per il rif. Ho aggiornato la risposta. –

+0

Buona risposta! Grazie mille per il tuo aiuto. @Alohci: Grazie per l'input in più, è logico. – Bungle

2

Infatti, non tutto il browser crea automaticamente <head></head> quando il documento viene caricato. Voglio dire, nemmeno sul browser moderno come Chrome (versione: 9.0.597.102).

Quando si carica un'immagine direttamente al browser, come ad esempio:
http://www.stylesight.com/assets/external/home_carousel/en/materials_ss12_m.jpg,
browser genererà solo il tag <body> per contenere l'immagine e il tag <head> non può essere trovato sul codice sorgente.

Google utilizzando questo codice:

(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(ga); 

Non possiamo creare <head> utilizzando document.createElement('head'): usando che otterrà un errore: "Error: HIERARCHY_REQUEST_ERR: DOM Exception 3".
Quindi, quando non ci sono etichette testa, non è possibile aggiungervi nulla. Ecco perché google inserisce l'elemento nello <body>.

+0

+1 Potresti aggiungere un riferimento alla dichiarazione che non è possibile creare dinamicamente un tag 'head'? – GitaarLAB

+0

@GitaarLAB: l'errore "": HIERARCHY_REQUEST_ERR: DOM Exception 3 "' è un riferimento presumendo che sia stato copiato da una console del browser. Sarebbe bello indicare * quale * browser lo genera comunque. – slebetman

+0

@slebetman: in effetti intendevo: quali browser lanciano questa e qualche fonte (autorevole) online che "documenta" questo. – GitaarLAB

1

Non viene dato l'elemento "head" sarà sempre presente, normalmente dipende dai browser e dal documento DOCTYPE.Per una discussione e diversi test su questa Sede:

http://www.stevesouders.com/blog/2010/05/12/autohead-my-first-browserscope-user-test/

Di seguito si prenderà cura di molte stranezze ed è il codice riutilizzabile più breve per il caricamento di script generici (tra cui GA e simili):

function require(src) { 
    var s, d = document, r = d.documentElement; 
    (s = d.createElement('script')).src = src; 
    r.removeChild(r.insertBefore(s, r.firstChild)); 
} 

require(('https:' == document.location.protocol ? 
    'https://ssl' : 'http://www') + 
    '.google-analytics.com/ga.js'); 

qui lo script viene anche rimosso dal documento (dopo essere stato caricato/eseguito) ma è solo un gusto personale, si può saltare il "removeChild" se necessario. Non ci sono differenze nel comportamento rimuovendolo o lasciandolo sul posto.