¿Es incorrecto colocar la etiqueta <script> después de la etiqueta </body>?

219

Qué incorrecto es colocar la etiqueta del script después de la etiqueta de cierre del cuerpo ( </body>). ?

<html>
  ....
  <body>
     ....
  </body>
  <script type="text/javascript" src="theJs.js"></script>
</html>

javascript html

— DanC
fuente

1

¿Hay soporte para esto en los navegadores modernos?

— Xdrone

Posible duplicado de ¿Dónde debo poner las etiquetas <script> en el marcado HTML?

— mapto

191

No se validará fuera de las etiquetas <body>o <head>. Tampoco hará mucha diferencia, a menos que esté haciendo manipulaciones DOM que podrían romper IE antes de que el elemento del cuerpo esté completamente cargado, para colocarlo justo antes del cierre </body>.

<html>
  ....
  <body>
     ....
     <script type="text/javascript" src="theJs.js"></script>
  </body>
</html>

— Andy E
fuente

13

@epalla: si coloca el script justo al final de la etiqueta del cuerpo, no queda otro contenido para cargar cuando llegue allí, por lo que debería haber poca diferencia entre colocarlo afuera o solo adentro. Luego tiene el beneficio adicional de que su página aún se está validando, que era el punto que estaba tratando de hacer en mi respuesta.

— Andy E

1

Sí, estaba de acuerdo contigo ya que tu respuesta es buena. Solo quería agregar que hay una razón para poner JS en la parte inferior de la página en lugar de en la cabeza, como lo hemos hecho durante mucho tiempo.

— Matt Brunmeier

3

@PHPst: bueno, el código no válido puede estar sujeto a efectos secundarios en ciertos navegadores. De cualquier manera, no veo cómo su sangría sea un ancho de pestaña menor que el código anterior, lo que hace que se vea más limpio.

— Andy E

1

@PHPst: esperaría que los navegadores lo manejen si realmente quieres escribir tu código de esa manera. Sin embargo, todavía recomiendo escribir su código para validar.

— Andy E

1

@technosaurus: siempre existe <script src="..." defer>, lo que funciona en todos los principales navegadores (aunque con un error potencialmente inminente en IE9 y versiones inferiores).

— Andy E

88

Si. Solo se permiten comentarios y la etiqueta final para el elemento html después de la etiqueta final para el cuerpo.

Los navegadores pueden realizar la recuperación de errores, pero nunca debe depender de eso.

— Quentin
fuente

12

Esta es una mejor respuesta. Hay demasiados navegadores nuevos con dispositivos móviles que entran en juego para arriesgarse a hacerlo mal cuando todo lo que tiene que hacer es cortar y pegar una sola etiqueta de cierre.

— Erik Reppen

33

Como Andy dijo que el documento no será válido, sin embargo, el guión seguirá siendo interpretado. Vea el fragmento de WebKit, por ejemplo:

void HTMLParser::processCloseTag(Token* t)
{
    // Support for really broken html.
    // we never close the body tag, since some stupid web pages close it before 
    // the actual end of the doc.
    // let's rely on the end() call to close things.
    if (t->tagName == htmlTag || t->tagName == bodyTag 
                              || t->tagName == commentAtom)
        return;
    ...

— Vitalii Fedorenko
fuente

11

"Soporte para html realmente roto". - Creo que lo dice todo.

— Diogo Kollross

8

IE ya no permite esto (desde la Versión 10, creo) e ignorará dichos scripts. FF y Chrome todavía los toleran, pero hay posibilidades de que algún día lo eliminen como no estándar.

— Bronx
fuente

1

Y, sin embargo, Google hace esto en su ejemplo de cómo iniciar sesión en Google+, con la "última actualización del 10 de abril de 2014". Lo obtuve de la versión para Java en el servidor ( developers.google.com/+/quickstart/java ) pero presumiblemente es el mismo HTML + js para todos.

— Tom

2

Insertar procedimentalmente "script de elemento" después de que "cuerpo de elemento" sea "error de análisis" según el proceso recomendado por W3C . En "Construcción de árbol", cree un error y ejecute "tokenizar de nuevo" para procesar ese contenido. Entonces es como un paso adicional. Solo entonces se puede ejecutar "Ejecución de secuencia de comandos": consulte el proceso del esquema .

Cualquier otra cosa "error de análisis". Cambie el "modo de inserción" a "en el cuerpo" y reprocese el token.

Técnicamente por navegador es un proceso interno, cómo lo marcan y lo optimizan.

Espero haber ayudado a alguien.

— BG Bruno
fuente

0

Si. Pero si agrega el código fuera de él, lo más probable es que no sea el fin del mundo, ya que la mayoría de los navegadores lo arreglarán, pero sigue siendo una mala práctica.

— Taylor Satula
fuente

0

Google realmente recomienda esto con respecto a la 'Optimización CSS'. Recomiendan en línea estilos críticos de plegado superior y diferir el resto (archivo css).

Ejemplo:

<html>
  <head>
    <style>
      .blue{color:blue;}
    </style>
    </head>
  <body>
    <div class="blue">
      Hello, world!
    </div>
  </body>
</html>
<noscript><link rel="stylesheet" href="small.css"></noscript>

Ver: https://developers.google.com/speed/docs/insights/OptimizeCSSDelivery

— Donald Porter
fuente

8

Se supone que no debes poner cosas fuera del bodyelemento. Ese artículo de Google no aconseja a nadie que haga tal cosa.

— ChaseMoskal

2

Me temo que la página de Google dice en realidad exactamente eso.

— 10us

66

Parece que a la vez, que la página se recomienda una cosa así, pero ya no. (Ahora hay una carga dinámica con javascript). La versión alemana no está actualizada y aún contiene el antiguo ejemplo de código.

— bodo

1

"elemento noscript" tiene que ser por RFC dentro de "element html" y "element body" también

— BG Bruno

0

Los navegadores modernos tomarán etiquetas de script en el cuerpo de esta manera:

<body>
    <script src="scripts/main.js"></script>
</body>

Básicamente, significa que el script se cargará una vez que la página haya terminado, lo que puede ser útil en ciertos casos (es decir, la manipulación DOM). Sin embargo, le recomiendo que tome el mismo script y lo coloque en la etiqueta de la cabeza con "aplazar", ya que dará el mismo efecto.

<head>
    <script src="scripts/main.js" defer></script>
</head>

— Anuncio de caridad
fuente

Lo que sería útil es si las scriptetiquetas tuvieran un eventatributo que pudiera definirse para determinar cuándo analizar el script. Por lo tanto, debe event="load" event="DOMContentLoaded"ejecutar el script después de crear el DOM o event="beforeunload"en el beforeunloadevento de la ventana . Ejemplo, <script src="scripts/main.js" event="DOMContentLoaded"></script>.

— 1.21 gigavatios