2010-08-29 11 views
13

Cada navegador que he observado crea un elemento <head> que está accesible en el DOM, incluso si no hay etiquetas explícitas <head></head> en el marcado del documento.¿Hay un elemento <head> siempre disponible en el DOM, incluso si está ausente en el marcado HTML?

Sin embargo, Google Analytics utiliza el siguiente código para la inserción de la escritura dinámica:

(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 siguiente línea:

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

parece hacer una concesión especial para los casos en los que un elemento <head> no está presente .

¿Es esto solo un caso de extrema compatibilidad con versiones anteriores (por ejemplo, para Netscape 4 o similar), o hay un caso para no asumir que los navegadores modernos (es decir, Internet Explorer 6 y más reciente) siempre tendrá acceso a un elemento <head> en el DOM?

+2

IE6 e incluso IE5.5 agregan un elemento 'HEAD' si no está presente, otros navegadores como Safari <= 4 no lo hacen, también tal vez algunas antiguas versiones de Opera IIRC. – CMS

+0

Gracias, CMS! IE 6 es lo más antiguo que he admitido en mucho tiempo, por lo que tiene sentido que me acabe de acostumbrar al navegador agregando un '' automágicamente. – Bungle

Respuesta

13

Los navegadores modernos están creando el elemento principal para usted cuando sea necesario.

Pero suponiendo que el cliente lo haga no es inteligente si quiere que su código sea a prueba de balas. Entonces los Googlers son conservadores y seguros.

La cláusula adicional en su declaración es de minimus, pero agrega confiabilidad adicional. Entonces es algo bueno

ps Buen trabajo en la pregunta y sacando el código correspondiente.

Agregado:

El HTML spec dice que la etiqueta de la cabeza es opcional. No creo que la especificación requiera la creación de los "browers" del "elemento" principal en el dom. Google no quiere (y no debería) contar con que esté allí.

+2

La especificación HTML 4.01 dice que se requiere el elemento head * *. Solo las * etiquetas * son opcionales. Ver http://www.w3.org/TR/1999/REC-html401-19991224/struct/global.html#edef-HTML. Los navegadores, por supuesto, con frecuencia no siguen las especificaciones y si crean automáticamente el elemento principal, será porque un número significativo de páginas web del mundo real se rompen en los navegadores que no lo hacen. – Alohci

+0

@Alochi - gracias por la ref. He actualizado la respuesta. –

+0

¡Buena respuesta! Muchas gracias por su ayuda. @Alohci: Gracias por la entrada extra, tiene sentido. – Bungle

2

De hecho, no todos los navegadores crean automáticamente <head></head> cuando el documento está cargado. Quiero decir, ni siquiera en un navegador moderno como Chrome (Versión: 9.0.597.102).

Cuando se carga una imagen directamente en el navegador, como por ejemplo:
http://www.stylesight.com/assets/external/home_carousel/en/materials_ss12_m.jpg,
el navegador sólo generará la etiqueta <body> para contener la imagen y la etiqueta <head> no se puede encontrar en el código fuente.

Google utilizando este código:

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

no podemos crear <head> usando document.createElement('head'): el uso que hará que un error: "Error: HIERARCHY_REQUEST_ERR: DOM Exception 3".
Por lo tanto, cuando no hay etiqueta de cabecera, no se puede agregar nada. Es por eso que google puso el elemento en el <body> en su lugar.

+0

+1 ¿Podría agregar una referencia a la afirmación de que no se puede crear dinámicamente una etiqueta 'head'? – GitaarLAB

+0

@GitaarLAB: El '" Error: HIERARCHY_REQUEST_ERR: DOM Exception 3 "' es una referencia suponiendo que se copia desde una consola del navegador. Sería bueno indicar * qué * navegador genera eso. – slebetman

+0

@slebetman: de hecho, quise decir: qué navegadores lanzan esto y alguna fuente en línea (autorizada) que 'documenta' esto. – GitaarLAB

1

No se le da el elemento "cabeza" siempre estará presente, normalmente depende de los navegadores y el documento DOCTYPE.Para una discusión y varias pruebas en esta sede:

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

A continuación se hará cargo de muchas peculiaridades y es el código reutilizable más corto para cargar secuencias de comandos genéricos (incluyendo GA y los gustos):

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

aquí la secuencia de comandos también se elimina del documento (después de ser cargado/ejecutado) pero eso es solo gusto personal, se puede omitir el "removeChild" si es necesario. No hay diferencia en el comportamiento al quitarlo o dejarlo en su lugar.

Cuestiones relacionadas