2010-08-29 14 views
13

Chaque navigateur que j'ai observé crée un élément <head> accessible dans le DOM même s'il n'y a pas de balises <head></head> explicites dans le balisage du document.Un élément <head> est-il toujours disponible dans le DOM, même s'il est absent du balisage HTML?

Cependant, Google Analytics utilise le code suivant pour l'insertion de script dynamique:

(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 ligne suivante:

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

semble faire une concession spéciale pour les cas où un élément <head> n'est pas présent . Est-ce juste un cas de rétrocompatibilité extrême (par exemple, pour Netscape 4, ou similaire), ou est-il un cas à faire pour ne pas supposer que les navigateurs modernes (à savoir, Internet Explorer 6 et plus récent) aura toujours accès à un élément <head> dans le DOM?

+2

IE6 et même IE5.5 ajouter un élément 'HEAD' si pas présent, d'autres navigateurs comme Safari <= 4 ne le font pas, peut-être aussi quelques vieilles versions d'opéra IIRC. – CMS

+0

Merci, CMS! IE 6 est à peu près aussi loin que je l'ai supporté depuis longtemps, donc il est logique que je sois juste habitué au navigateur en ajoutant un '' automagically. – Bungle

Répondre

13

Les navigateurs modernes créent l'élément de tête pour vous si nécessaire. Mais supposer que le client le fera n'est pas intelligent si vous voulez que votre code soit à l'épreuve des balles. Les Googlers sont donc conservateurs et sûrs.

La clause supplémentaire dans leur instruction est de minimus, mais ajoute une fiabilité supplémentaire. Donc c'est une bonne chose.

ps Bon travail sur la question et en retirant le code pertinent.

Ajouté:

Le HTML spec dit que l'étiquette de tête est facultative. Je ne pense pas que la création des «éléments» de la tête dans le dom soit exigée par les spécifications. Google ne veut pas (et ne devrait pas) y compter.

+2

La spécification HTML 4.01 indique que l'élément head * est requis. Seuls les * tags * sont optionnels. Voir http://www.w3.org/TR/1999/REC-html401-19991224/struct/global.html#edef-HTML. Les navigateurs, bien sûr, ne suivent souvent pas les spécifications et s'ils créent systématiquement automagiquement l'élément de tête, ce sera parce qu'un nombre important de pages web réelles cassent dans les navigateurs qui ne le font pas. – Alohci

+0

@Alochi - merci pour l'ref. J'ai mis à jour la réponse. –

+0

Bonne réponse! Merci beaucoup pour votre aide. @Alohci: Merci pour l'entrée supplémentaire - c'est logique. – Bungle

2

En fait, tous les navigateurs ne créent pas automatiquement <head></head> lorsque le document est chargé. Je ne parle même pas sur un navigateur moderne tel que Chrome (Version: 9.0.597.102).

Lorsque vous chargez une image directement dans le navigateur, comme par exemple:
http://www.stylesight.com/assets/external/home_carousel/en/materials_ss12_m.jpg,
le navigateur ne génère la balise <body> pour contenir l'image et l'étiquette <head> ne peut pas être trouvé sur le code source.

Google en utilisant ce code:

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

Nous ne pouvons pas créer <head> à l'aide document.createElement('head'): à l'aide qui obtiendrez une erreur: "Error: HIERARCHY_REQUEST_ERR: DOM Exception 3".
Ainsi, lorsqu'il n'y a pas d'étiquette de tête, vous ne pouvez rien y ajouter. C'est pourquoi google a placé l'élément dans le <body> à la place.

+0

+1 Pourriez-vous s'il vous plaît ajouter une référence à la déclaration que l'on ne peut pas créer dynamiquement une balise 'head'? – GitaarLAB

+0

@GitaarLAB: L'erreur "HIERARCHY_REQUEST_ERR: DOM Exception 3" 'est une référence supposant qu'elle a été copiée à partir d'une console de navigateur. Il serait bon d'indiquer * quel * navigateur génère cela bien. – slebetman

+0

@slebetman: en effet, je voulais dire: quels navigateurs lancent ceci et une source en ligne (faisant autorité) qui «documente» ceci. – GitaarLAB

1

Il n'est pas donné l'élément "head" sera toujours présent, il dépend normalement des navigateurs et du document DOCTYPE.Pour une discussion et plusieurs tests sur ce voir:

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

Prendront soin de beaucoup de bizarreries et il est le plus court du code réutilisable pour le chargement des scripts génériques (y compris les GA et les goûts):

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'); 

ici le script est également supprimé du document (après avoir été chargé/exécuté) mais c'est juste un goût personnel, on peut passer le "removeChild" si nécessaire. Il n'y a pas de différence de comportement en l'enlevant ou en le laissant en place.