Baseline Widely available *
El elemento <script>
HTML se utiliza para incrustar código ejecutable o datos; tÃpicamente se usa para incrustar o hacer referencia a código JavaScript. El elemento <script>
también puede usarse con otros lenguajes, como el lenguaje de programación de shaders GLSL de WebGL y JSON.
Este elemento incluye los atributos globales.
async
Para scripts clásicos, si el atributo async
está presente, el script clásico se descargará en paralelo al análisis y se evaluará tan pronto como esté disponible.
Para scripts de módulo, si el atributo async
está presente, los scripts y todas sus dependencias se descargarán en paralelo al análisis y se evaluarán tan pronto como estén disponibles.
Advertencia: Este atributo no debe usarse si el atributo src
está ausente (es decir, para scripts en lÃnea), ya que en este caso no tendrÃa efecto.
Este atributo permite eliminar JavaScript bloqueante del analizador, donde el navegador tendrÃa que cargar y evaluar los scripts antes de continuar con el análisis. En este caso, defer
tiene un efecto similar.
Si el atributo se especifica junto con el atributo defer
, el elemento actuará como si solo se hubiera especificado el atributo async
.
Este es un atributo booleano: la presencia de un atributo booleano en un elemento representa el valor verdadero, y la ausencia del atributo representa el valor falso.
Consulte Compatibilidad con navegadores para notas sobre el soporte del navegador. Consulte también Scripts asÃncronos para asm.js.
attributionsrc
Experimental
Especifica que deseas que el navegador envÃe un encabezado Attribution-Reporting-Eligible
junto con la solicitud del recurso del script. En el lado del servidor, esto se utiliza para activar el envÃo de un encabezado Attribution-Reporting-Register-Source
o Attribution-Reporting-Register-Trigger
en la respuesta, para registrar una fuente de atribución o un disparador de atribución basado en JavaScript, respectivamente. Qué encabezado de respuesta se debe enviar depende del valor del encabezado Attribution-Reporting-Eligible
que activó el registro.
Nota: Alternativamente, las fuentes de atribución o disparadores basados en JavaScript se pueden registrar enviando una solicitud fetch()
que contenga la opción attributionReporting
(ya sea configurada directamente en la llamada fetch()
o en un objeto Request
pasado a la llamada fetch()
), o enviando un XMLHttpRequest
con setAttributionReporting()
invocado en el objeto de solicitud.
Hay dos versiones de este atributo que puedes configurar:
Booleano, es decir, solo el nombre attributionsrc
. Esto especifica que deseas que el encabezado Attribution-Reporting-Eligible
se envÃe al mismo servidor al que apunta el atributo src
. Esto es adecuado cuando manejas el registro de fuentes de atribución o disparadores en el mismo servidor. Al registrar un disparador de atribución, esta propiedad es opcional y se usará un valor de cadena vacÃa si se omite.
Valor que contiene una o más URL, por ejemplo:
<script
src="myscript.js"
attributionsrc="https://a.example/register-source https://b.example/register-source"></script>
Esto es útil en casos donde el recurso solicitado no está en un servidor que controlas o simplemente deseas manejar el registro de la fuente de atribución en un servidor diferente. En este caso, puedes especificar una o más URL como el valor de attributionsrc
. Cuando ocurra la solicitud del recurso, el encabezado Attribution-Reporting-Eligible
se enviará a las URL especificadas en attributionSrc
además del origen del recurso. Estas URL pueden responder con un encabezado Attribution-Reporting-Register-Source
o Attribution-Reporting-Register-Trigger
según sea necesario para completar el registro.
Nota: Especificar múltiples URL significa que se pueden registrar múltiples fuentes de atribución en la misma función. Por ejemplo, podrÃas tener diferentes campañas que estás tratando de medir el éxito, lo que implica generar diferentes informes sobre diferentes datos.
Consulta la API de informes de atribución para más detalles.
blocking
Este atributo indica explÃcitamente que ciertas operaciones deben bloquearse al obtener el script. Las operaciones que se deben bloquear deben ser una lista separada por espacios de tokens de bloqueo enumerados a continuación.
render
: Se bloquea el renderizado del contenido en la pantalla.crossorigin
Los elementos script
normales pasan información mÃnima al window.onerror
para scripts que no superan las comprobaciones estándar de CORS. Para permitir el registro de errores en sitios que utilizan un dominio separado para medios estáticos, usa este atributo. Consulta Atributos de configuración CORS para una explicación más descriptiva de sus argumentos válidos.
defer
Este atributo booleano se establece para indicar al navegador que el script debe ejecutarse después de que el documento haya sido analizado, pero antes de que se dispare el evento DOMContentLoaded
.
Los scripts con el atributo defer
evitarán que el evento DOMContentLoaded
se dispare hasta que el script se haya cargado y evaluado por completo.
Advertencia: Este atributo no debe usarse si el atributo src
está ausente (es decir, para scripts en lÃnea), ya que no tendrÃa efecto.
El atributo defer
no tiene efecto en module scripts â se diferencian por defecto.
Los scripts con el atributo defer
se ejecutarán en el orden en el que aparecen en el documento.
Este atributo permite eliminar JavaScript bloqueante del analizador, donde el navegador tendrÃa que cargar y evaluar scripts antes de continuar con el análisis. async
tiene un efecto similar en este caso.
Si el atributo se especifica junto con el atributo async
, el elemento actuará como si solo se especificara el atributo async
.
fetchpriority
Proporciona una pista sobre la prioridad relativa a usar al obtener un script externo. Valores permitidos:
high
Obtiene el script externo con una prioridad alta en relación con otros scripts externos.
low
Obtiene el script externo con una prioridad baja en relación con otros scripts externos.
auto
No establece una preferencia por la prioridad de obtención. Este es el valor predeterminado. Se usa si no se establece ningún valor o si se establece un valor no válido.
Consulta HTMLScriptElement.fetchPriority
para obtener más información.
integrity
Este atributo contiene metadatos en lÃnea que un agente de usuario puede usar para verificar que un recurso obtenido se haya entregado sin manipulación inesperada. El atributo no debe especificarse si el atributo src
no está especificado. Consulta Integridad de subrecursos.
nomodule
Este atributo booleano se establece para indicar que el script no debe ejecutarse en navegadores que admiten módulos ES, en efecto, esto puede usarse para servir scripts de respaldo a navegadores más antiguos que no admiten código JavaScript modular.
nonce
Un nonce (número usado una vez) criptográfico para permitir scripts en una polÃtica de seguridad de contenido script-src. El servidor debe generar un valor único de nonce cada vez que transmite una polÃtica. Es fundamental proporcionar un nonce que no pueda adivinarse, ya que de lo contrario, eludir la polÃtica de un recurso serÃa trivial.
referrerpolicy
Indica qué referer enviar al obtener el script o recursos obtenidos por el script:
no-referrer
: El encabezado Referer
no será enviado.no-referrer-when-downgrade
: El encabezado Referer
no se enviará a origin sin TLS (HTTPS).origin
: El referer enviado se limitará al origen de la página de referencia: su esquema, host, y port.origin-when-cross-origin
: El referer enviado a otros orÃgenes se limitará al esquema, el host y el puerto. Las navegaciones en el mismo origen seguirán incluyendo la ruta.same-origin
: Un referer será enviado para mismo origen, pero las solicitudes entre orÃgenes no contendrán información de referer.strict-origin
: Solo envÃa el origen del documento como referer cuando el nivel de seguridad del protocolo permanece igual (HTTPSâHTTPS), pero no lo envÃes a un destino menos seguro (HTTPSâHTTP).strict-origin-when-cross-origin
(predeterminado): EnvÃa una URL completa al realizar una solicitud del mismo origen, solo envÃa el origen cuando el nivel de seguridad del protocolo permanece igual (HTTPSâHTTPS) y no envÃa encabezado a un destino menos seguro (HTTPSâHTTP).unsafe-url
: El referer incluirá el origen y la ruta (pero no el fragmento, contraseña, o nombre de usuario). Este valor no es seguro, porque filtra orÃgenes y rutas de recursos protegidos por TLS a orÃgenes inseguros.Nota: Un valor de cadena vacÃa (""
) es tanto el valor predeterminado como un valor de respaldo si referrerpolicy
no es compatible. Si no se especifica explÃcitamente referrerpolicy
en el elemento <script>
, adoptará una polÃtica de referer de nivel superior, es decir, una establecida en todo el documento o dominio. Si no hay una polÃtica de nivel superior disponible, la cadena vacÃa se trata como equivalente a strict-origin-when-cross-origin
.
src
Este atributo especifica la URI de un script externo; se puede usar como una alternativa a incrustar un script directamente dentro de un documento.
type
Este atributo indica el tipo de script representado. El valor de este atributo será uno de los siguientes:
Indica que el script es un "script clásico", que contiene código JavaScript. Se recomienda que los autores omitan el atributo si el script hace referencia a código JavaScript en lugar de especificar un tipo MIME. Los tipos MIME de JavaScript están listados en la especificación de tipos de medios IANA.
importmap
Este valor indica que el cuerpo del elemento contiene un mapa de importaciones. El mapa de importaciones es un objeto JSON que los desarrolladores pueden usar para controlar cómo el navegador resuelve los especificadores de módulos al importar módulos de JavaScript.
module
Este valor hace que el código sea tratado como un módulo de JavaScript. El procesamiento del contenido del script se aplaza. Los atributos charset
y defer
no tienen efecto. Para obtener más información sobre el uso de module
, consulta nuestra guÃa de módulos de JavaScript. A diferencia de los scripts clásicos, los scripts de módulo requieren el uso del protocolo CORS para la obtención de recursos de orÃgenes cruzados.
speculationrules
Experimental
Este valor indica que el cuerpo del elemento contiene reglas de especulación. Las reglas de especulación toman la forma de un objeto JSON que determina qué recursos deben ser precargados o prerenderizados por el navegador. Esto es parte de la Speculation Rules API.
El contenido incrustado se trata como un bloque de datos y no será procesado por el navegador. Los desarrolladores deben usar un tipo MIME válido que no sea un tipo MIME de JavaScript para denotar bloques de datos. Todos los demás atributos serán ignorados, incluyendo el atributo src
.
charset
Obsoleto
Si está presente, su valor debe ser una coincidencia insensible a mayúsculas de ASCII con utf-8
. Es innecesario especificar el atributo charset
, porque los documentos deben usar UTF-8, y el elemento script
hereda su codificación de caracteres del documento.
language
Obsoleto No estándar
Al igual que el atributo type
, este atributo identifica el lenguaje de secuencias de comandos utilizado. Sin embargo, los valores posibles de este atributo nunca fueron estandarizados. En su lugar, debe usarse el atributo type
.
Los scripts sin los atributos async
, defer
o type="module"
, asà como los scripts en lÃnea sin el atributo type="module"
, se obtienen y ejecutan inmediatamente antes de que el navegador continúe con el análisis de la página.
El script debe ser servido con el tipo MIME text/javascript
, pero los navegadores son permisivos y solo los bloquearán si el script es servido con un tipo de imagen (image/*
), un tipo de video (video/*
), un tipo de audio (audio/*
), o text/csv
. Si el script es bloqueado, se enviará un evento error
al elemento; de lo contrario, se enviará un evento load
.
Estos ejemplos muestran cómo importar un script (externo) usando el elemento <script>
.
<script src="javascript.js"></script>
Y los siguientes ejemplos muestran cómo insertar un script (en lÃnea) dentro del elemento <script>
.
<script>
alert("¡Hola Mundo!");
</script>
async y defer
Los scripts cargados utilizando el atributo async
descargan el script sin bloquear la página mientras se obtiene el script. Sin embargo, una vez que la descarga se completa, el script se ejecutará, lo que bloquea la página de renderizarse. Esto significa que el resto del contenido en la página web no podrá ser procesado y mostrado al usuario hasta que el script termine de ejecutarse. No se garantiza que los scripts se ejecuten en un orden especÃfico. Es mejor usar async
cuando los scripts en la página se ejecutan independientemente entre sà y no dependen de otro script en la página.
Los scripts cargados con el atributo defer
se cargarán en el orden en que aparecen en la página. No se ejecutarán hasta que el contenido de la página se haya cargado completamente, lo cual es útil si tus scripts dependen de que el DOM esté en su lugar (por ejemplo, si modifican uno o más elementos en la página).
Aquà tienes una representación visual de los diferentes métodos de carga de scripts y lo que significa para tu página:
Esta imagen es del HTML spec, copiada y recortada a una versión reducida, bajo los términos de la licencia CC BY 4.0.
Por ejemplo, si tienes los siguientes elementos de script:
<script async src="js/vendor/jquery.js"></script>
<script async src="js/script2.js"></script>
<script async src="js/script3.js"></script>
No puedes confiar en el orden en que se cargarán los scripts. jquery.js
puede cargarse antes o después de script2.js
y script3.js
, y si este es el caso, cualquier función en esos scripts que dependa de jquery
producirá un error porque jquery
no estará definido en el momento en que el script se ejecute.
Se debe usar async
cuando tengas muchos scripts en segundo plano que cargar, y solo quieras que estén listos lo antes posible. Por ejemplo, tal vez tengas algunos archivos de datos del juego que cargar, que serán necesarios cuando el juego comience, pero por ahora solo quieres seguir mostrando la introducción del juego, los tÃtulos y el vestÃbulo, sin que se vean bloqueados por la carga de scripts.
Los scripts cargados usando el atributo defer
(ver abajo) se ejecutarán en el orden en que aparecen en la página y se ejecutarán tan pronto como el script y el contenido hayan sido descargados:
<script defer src="js/vendor/jquery.js"></script>
<script defer src="js/script2.js"></script>
<script defer src="js/script3.js"></script>
En el segundo ejemplo, podemos estar seguros de que jquery.js
se cargará antes que script2.js
y script3.js
, y que script2.js
se cargará antes que script3.js
. No se ejecutarán hasta que el contenido de la página se haya cargado completamente, lo cual es útil si tus scripts dependen de que el DOM esté en su lugar (por ejemplo, si modifican uno o más elementos en la página).
Para resumir:
async
como defer
indican al navegador que descargue los scripts en un hilo separado, mientras el resto de la página (el DOM, etc.) se descarga, por lo que la carga de la página no se bloquea durante el proceso de obtención.async
se ejecutarán tan pronto como se complete la descarga. Esto bloquea la página y no garantiza un orden de ejecución especÃfico.defer
se cargarán en el orden en que están en la página y solo se ejecutarán cuando todo haya terminado de cargarse.async
.defer
y pon los elementos <script>
correspondientes en el orden en que deseas que el navegador los ejecute.Los navegadores que admiten el valor module
para el atributo type
ignoran cualquier script con un atributo nomodule
. Esto te permite usar scripts de módulo mientras proporcionas scripts de fallback marcados con nomodule
para los navegadores que no los admiten.
<script type="module" src="main.js"></script>
<script nomodule src="fallback.js"></script>
Importando módulos con importmap
Cuando importas módulos en los scripts, si no usas la caracterÃstica type=importmap
, entonces cada módulo debe importarse utilizando un especificador de módulo que sea una URL absoluta o relativa. En el siguiente ejemplo, el primer especificador de módulo ("./shapes/square.js") se resuelve de manera relativa a la URL base del documento, mientras que el segundo es una URL absoluta.
import { name as squareName, draw } from "./shapes/square.js";
import { name as circleName } from "https://example.com/shapes/circle.js";
Un mapa de importación te permite proporcionar una asignación que, si coincide, puede reemplazar el texto en el especificador de módulo. El siguiente mapa de importación define las claves square
y circle
que se pueden usar como alias para los especificadores de módulos mostrados arriba.
<script type="importmap">
{
"imports": {
"square": "./shapes/square.js",
"circle": "https://example.com/shapes/circle.js"
}
}
</script>
Esto nos permite importar módulos utilizando nombres en el especificador de módulos (en lugar de URLs absolutas o relativas).
import { name as squareName, draw } from "square";
import { name as circleName } from "circle";
Para obtener más ejemplos de lo que puedes hacer con los mapas de importación, consulta la sección de Importación de módulos usando mapas de importación en la guÃa de módulos de JavaScript.
Incrustando datos en HTMLTambién puedes usar el elemento <script>
para incrustar datos en HTML con renderizado del lado del servidor especificando un tipo MIME no JavaScript válido en el atributo type
.
<!-- Generado por el servidor -->
<script id="data" type="application/json">
{
"userId": 1234,
"userName": "Maria Cruz",
"memberSince": "2000-01-01T00:00:00.000Z"
}
</script>
<!-- Estático -->
<script>
const userInfo = JSON.parse(document.getElementById("data").text);
console.log("Información del usuario: %o", userInfo);
</script>
Bloqueando el renderizado hasta que un script sea obtenido y ejecutado
Puedes incluir el token render
dentro de un atributo blocking
; el renderizado de la página se bloqueará hasta que el script sea obtenido y ejecutado. En el siguiente ejemplo, bloqueamos el renderizado en un script async, para que el script no bloquee el análisis pero se garantiza que será evaluado antes de que comience el renderizado.
<script blocking="render" async src="async-script.js"></script>
Resumen técnico Especificaciones Compatibilidad con los navegadores Véase también
document.currentScript
async
y defer
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4