L'élémentHTML<script> est utilisé pour intégrer du code ou des données exécutables : il sert généralement à intégrer ou référencer du code JavaScript. L'élément<script> peut aussi être utilisé avec d'autres langages, comme le langage de programmation GLSL deWebGL ouJSON.

Attributs

Cet élément inclutles attributs universels.

async

Pour les scripts classiques, si l'attributasync est présent, alors le script classique sera récupéré en parallèle de l'analyse et évalué dès qu'il sera disponible.

Pour lesmodules de script, si l'attributasync est présent, alors les scripts et toutes leurs dépendances seront récupérés en parallèle de l'analyse et évalués dès qu'ils seront disponibles.

Attention :Cet attribut ne doit pas être utilisé si l'attributsrc est absent (c'est-à-dire pour les scripts « en ligne ») pour les scripts classiques, dans ce cas il n'aurait aucun effet.

Cet attribut permet d'éviter que leJavaScript bloque l'analyse du document : le navigateur n'a plus à charger et évaluer les scripts avant de poursuivre l'analyse. L'attributdefer produit un effet similaire.

Siasync etdefer sont présents, seulasync est pris en compte.

C'est un attribut booléen : sa présence indique la valeur vraie, son absence la valeur fausse.

Voir la sectionCompatibilité des navigateurs pour la prise en charge. Voir aussiles scripts asynchrones avec asm.js.

attributionsrcExpérimental

Indique que vous souhaitez que le navigateur envoie un en-têteAttribution-Reporting-Eligible avec la requête de ressource du script. Côté serveur, cela sert à déclencher l'envoi d'un en-têteAttribution-Reporting-Register-Source ouAttribution-Reporting-Register-Trigger dans la réponse, pour enregistrer respectivement unesource d'attribution ou undéclencheur d'attribution basé sur JavaScript. L'en-tête de réponse à envoyer dépend de la valeur de l'en-têteAttribution-Reporting-Eligible qui a déclenché l'enregistrement.

Note :Il est aussi possible d'enregistrer des sources ou déclencheurs d'attribution JavaScript en envoyant une requêtefetch() contenant l'optionattributionReporting (soit directement dans l'appel àfetch(), soit sur un objetRequest passé àfetch()), ou en envoyant unXMLHttpRequest avecsetAttributionReporting() invoqué sur l'objet requête.

Il existe deux versions de cet attribut que vous pouvez définir :

• Booléen, c'est-à-dire juste le nomattributionsrc. Cela indique que vous souhaitez que l'en-têteAttribution-Reporting-Eligible soit envoyé au même serveur que celui indiqué par l'attributsrc. Cela convient lorsque vous gérez l'enregistrement de la source ou du déclencheur d'attribution sur le même serveur. Lors de l'enregistrement d'un déclencheur d'attribution, cette propriété est optionnelle, et une valeur de chaîne de caractères vide sera utilisée si elle est omise.

• Valeur contenant une ou plusieurs URL, par exemple :

  html

  <script  src="myscript.js"  attributionsrc="https://a.example/register-source https://b.example/register-source"></script>

  Cela est utile dans les cas où la ressource demandée n'est pas sur un serveur que vous contrôlez, ou si vous souhaitez gérer l'enregistrement de la source d'attribution sur un autre serveur. Dans ce cas, une ou plusieurs URL peuvent être définies comme valeur deattributionsrc. Lors de la requête de ressource, l'en-têteAttribution-Reporting-Eligible sera envoyé à l'(aux) URL(s) définie(s) dansattributionsrc en plus de l'origine de la ressource. Ces URL peuvent alors répondre avec un en-têteAttribution-Reporting-Register-Source ouAttribution-Reporting-Register-Trigger selon le cas pour compléter l'enregistrement.

  Note :Définir plusieurs URL permet d'enregistrer plusieurs sources d'attribution sur la même fonctionnalité. Par exemple, différentes campagnes peuvent être mesurées, ce qui implique de générer différents rapports sur différentes données.

Voir l'API Attribution Reporting pour plus de détails.

blocking

Cet attribut indique explicitement que certaines opérations doivent être bloquées jusqu'à l'exécution du script. Les opérations à bloquer doivent être une liste d'identifiants séparés par des espaces. Actuellement, un seul identifiant existe :

• render : Le rendu du contenu à l'écran est bloqué.

Note :Seuls les éléments HTMLscript présents dans l'en-tête du document (<head>) peuvent bloquer le rendu. Les scripts ne bloquent pas le rendu par défaut : si un élémentscript n'inclut pastype="module",async oudefer, il bloque l'analyse, pas le rendu. Si un tel élément est ajouté dynamiquement, il faut définirblocking = "render" pour bloquer le rendu.

crossorigin

Les balises descript classiques enverront un minimum d'informations àwindow.onerror pour les scripts qui ne respectent pas les contrôles standard duCORS. Afin de disposer de plus de renseignements sur les erreurs pour les sites utilisant des domaines séparés pour des documents statiques, on pourra utiliser cet attribut. Voirla page de réglages des attributs CORS pour plus d'explications quant aux valeurs valides.

defer

Cet attribut booléen permet d'indiquer au navigateur que le script doit être exécuté après l'analyse du document et avant l'évènementDOMContentLoaded.

Les scripts qui utilisent l'attributdefer empêche le déclenchement de l'évènementDOMContentLoaded tant que le script n'a pas été chargé et que son évaluation n'est pas terminée.

Attention :Cet attribut ne doit pas être utilisé si l'attributsrc est absent (c'est-à-dire pour les scripts « en ligne »), dans ce cas il n'aurait aucun effet.

L'attributdefer n'a aucun effet sur lesmodules de script : ils sont différés par défaut.

Les scripts qui utilisent l'attributdefer seront exécutés dans l'ordre dans lequel ils apparaissent dans le document.

Cet attribut permet d'éliminer leJavaScript bloquant l'analyse où le navigateur devrait charger et évaluer les scripts avant de poursuivre l'analyse.async a un effet similaire dans ce cas.

Si l'attribut est défini avec l'attributasync, l'élément se comporte comme si seul l'attributasync est défini.

fetchpriority

Indique une suggestion de priorité relative à utiliser lors de la récupération d'un script externe.Valeurs autorisées :

high

Récupère le script externe avec une priorité élevée par rapport aux autres scripts externes.

low

Récupère le script externe avec une priorité faible par rapport aux autres scripts externes.

auto

Ne pas définir de préférence pour la priorité de récupération.Il s'agit de la valeur par défaut.Elle est utilisée si aucune valeur n'est définie ou si la valeur définie est incorrecte.

VoirHTMLScriptElement.fetchPriority pour plus d'informations.

integrity

Cet attribut contient des métadonnées que l'agent utilisateur peut vérifier afin de contrôler qu'une ressource téléchargée n'a pas été modifiée de façon frauduleuse. Pour plus d'informations, consulterla page relative à l'intégrité des sous-ressources.

nomodule

Cet attribut booléen indique que le script ne doit pas être exécuté dans les navigateurs qui prennent en charge lesmodules EcmaScript. Il permet ainsi de fournir un script de repli aux anciens navigateurs qui ne gèrent pas le code JavaScript modulaire.

nonce

Unnonce (pournumber used once en anglais) cryptographique utilisé pour inscrire les scripts en ligne sur une liste blanche pourla règlescript-src Content-Security-Policy. Le serveur doit générer un nonce unique chaque fois qu'il transmet une règle de sécurité. Ce nonce ne doit pas pouvoir être deviné car sinon, il devient trivial d'outrepasser la règle de sécurité.

referrerpolicy

Une chaîne de caractères qui indique leréférent (referrer en anglais) à utiliser lors de la récupération du script :

• no-referrer : signifie que l'en-têteReferer ne sera pas envoyé.
• no-referrer-when-downgrade : signifie qu'aucune en-têteReferer ne sera envoyé lorsqu'on navigue vers uneorigine qui n'utilise pasTLS (HTTPS).
• origin : le référent envoyé sera limité à l'origine de la page référente : sonschéma,host, etport.
• origin-when-cross-origin : signifie que les navigations vers d'autres origines seront limitées aux schémas, hôtes et ports. Les navigations sur la même origine inclueront le chemin explicite du référent.
• same-origin : un référent sera envoyé pourles origines du même site mais les requêtes multi-origines ne contiendront pas d'informations de référent.
• strict-origin : seule l'origine du document est envoyée comme référent lorsque le protocole de sécurité est le même (HTTPS→HTTPS). L'origine n'est pas envoyée lorsque la destination est moins sécurisée (HTTPS→HTTP).
• strict-origin-when-cross-origin (par défaut) : l'URL complète est envoyée pour les requêtes de même origine, seule l'origine est envoyée lorsque le protocole de sécurité est le même (HTTPS→HTTPS) et aucun en-tête n'est envoyé pour une destination moins sécurisée (HTTPS→HTTP).
• unsafe-url : signifie que le référent incluera l'origine et le chemin (mais pas lefragment, lemot de passe ou lenom utilisateur·ice).Cette valeur n'est pas sûre car elle peut entraîner des fuites d'origine ou de chemin provenant de ressources sécurisées avec TLS vers des origines insécures.

Note :Utiliser une chaîne vide ("") correspond à la valeur par défaut et à la valeur utilisée sireferrerpolicy n'est pas pris en charge. Si cet attribut n'est pas explicitement défini sur l'élément<script>, ce dernier respectera la politique défine à un niveau supérieur (sur le document ou sur le domaine). Si une telle politique n'est pas disponible, la chaîne vide sera considérée comme équivalente àstrict-origin-when-cross-origin.

src

Cet attribut définit l'URI d'un script externe. Cela peut être utilisé pour insérer des scripts autrement qu'en les insérant à même le document.

type

Cet attribut indique le type de script représenté.La valeur de cet attribut sera l'une des suivantes :

Attribut non défini (valeur par défaut), chaîne de caractères vide ou type MIME JavaScript

Indique que le script est un « script classique » contenant du code JavaScript.Il est recommandé d'omettre l'attribut si le script fait référence à du code JavaScript plutôt que de définir un type MIME.Les types MIME JavaScript sonténumérés dans la spécification IANA des types de média.

importmap

Cette valeur indique que le contenu de l'élément contient une carte d'import.La carte d'import est un objet JSON que les développeur·euse·s peuvent utiliser pour contrôler la résolution des spécificateurs de module lors de l'importation demodules JavaScript.

module

Cette valeur fait traiter le code comme un module JavaScript.Le traitement du contenu du script est différé.Les attributscharset etdefer n'ont aucun effet.Pour plus d'informations sur l'utilisation demodule, voir le guide surles modules JavaScript.Contrairement aux scripts classiques, les scripts modules nécessitent l'utilisation du protocole CORS pour les récupérations inter-origines.

speculationrulesExpérimental

Cette valeur indique que le contenu de l'élément contient des règles de spéculation.Les règles de spéculation prennent la forme d'un objet JSON qui détermine quelles ressources doivent être préchargées ou pré-rendues par le navigateur.Cela fait partie de laSpeculation Rules API.

Toute autre valeur

Le contenu embarqué est traité comme un bloc de données et ne sera pas traité par le navigateur.Les développeur·euse·s doivent utiliser un type MIME valide qui n'est pas un type MIME JavaScript pour indiquer des blocs de données.Tous les autres attributs seront ignorés, y compris l'attributsrc.

Attributs dépréciés

charsetObsolète

Si présent, sa valeur doit correspondre (sans tenir compte de la casse) àutf-8 selonASCII. Il est inutile de définir l'attributcharset, car les documents doivent utiliser UTF-8 et l'élémentscript hérite de l'encodage du document.

languageObsolèteNon standard

Comme l'attributtype, cet attribut spécifie le langage de script utilisé. Cependant, contrairement à l'attributtype les valeurs possibles de cet attribut n'ont jamais été normalisées. Il est recommandé d'utiliser l'attributtype plutôt que celui-là.

Notes

Les scripts sans les attributsasync,defer outype="module", ainsi que les scripts en ligne sans l'attributtype="module", sont récupérés et exécutés immédiatement avant que le navigateur ne poursuive l'analyse de la page.

Le script doit être servi avec le type MIMEtext/javascript, mais les navigateurs sont tolérants et ne les bloquent que si le script est servi avec un type image (image/*), vidéo (video/*), audio (audio/*) outext/csv.Si le script est bloqué, un évènementerror est envoyé à l'élément ; sinon, un évènementload est envoyé.

Exemples

Exemple simple

Cet exemple montre comment importer un script (externe) à l'aide de l'élément<script> :

<script src="javascript.js"></script>

L'exemple suivant montre comment placer un script (en ligne) à l'intérieur de l'élément<script> :

<script>  alert("Hello World!");</script>

async etdefer

Les scripts chargés avec l'attributasync téléchargent le script sans bloquer la page pendant la récupération du script.Cependant, une fois le téléchargement terminé, le script s'exécute, ce qui bloque l'affichage de la page. Cela signifie que le reste du contenu de la page web ne peut pas être traité ni affiché à l'utilisateur·ice tant que le script n'a pas fini de s'exécuter.Il n'y a aucune garantie sur l'ordre d'exécution des scripts.Il est préférable d'utiliserasync lorsque les scripts de la page fonctionnent indépendamment les uns des autres et ne dépendent d'aucun autre script de la page.

Les scripts chargés avec l'attributdefer seront chargés dans l'ordre où ils apparaissent dans la page.Ils ne s'exécutent qu'une fois que tout le contenu de la page a été chargé, ce qui est utile si vos scripts dépendent de la présence du DOM (par exemple, s'ils modifient un ou plusieurs éléments de la page).

Voici une représentation visuelle des différentes méthodes de chargement des scripts et ce que cela implique pour votre page :

Cette image provient de laspécification HTML^(angl.), copiée et recadrée dans une version réduite, sous licenceCC BY 4.0^(angl.).

Par exemple, si vous avez les éléments de script suivants :

<script async src="js/vendor/jquery.js"></script><script async src="js/script2.js"></script><script async src="js/script3.js"></script>

Vous ne pouvez pas compter sur l'ordre dans lequel les scripts seront chargés.jquery.js peut être chargé avant ou aprèsscript2.js etscript3.js et, dans ce cas, toute fonction de ces scripts dépendant dejquery produira une erreur carjquery ne sera pas défini au moment de l'exécution du script.

async doit être utilisé lorsque vous avez plusieurs scripts d'arrière-plan à charger et que vous souhaitez simplement les mettre en place dès que possible.Par exemple, vous pouvez avoir des fichiers de données de jeu à charger, qui seront nécessaires lorsque le jeu commencera réellement, mais pour l'instant vous souhaitez simplement afficher l'introduction, les titres et le hall du jeu, sans que le chargement des scripts ne bloque l'affichage.

Les scripts chargés avec l'attributdefer (voir ci-dessous) s'exécutent dans l'ordre où ils apparaissent dans la page et sont exécutés dès que le script et le contenu sont téléchargés :

<script defer src="js/vendor/jquery.js"></script><script defer src="js/script2.js"></script><script defer src="js/script3.js"></script>

Dans le second exemple, on peut être certain quejquery.js sera chargé avantscript2.js etscript3.js et quescript2.js sera chargé avantscript3.js.Ils ne s'exécutent qu'une fois que tout le contenu de la page a été chargé, ce qui est utile si vos scripts dépendent de la présence du DOM (par exemple, s'ils modifient un ou plusieurs éléments de la page).

Pour résumer :

• async etdefer demandent tous deux au navigateur de télécharger le ou les scripts dans un fil séparé, pendant que le reste de la page (le DOM, etc.) est téléchargé, de sorte que le chargement de la page n'est pas bloqué pendant la récupération.
• Les scripts avec un attributasync s'exécutent dès que le téléchargement est terminé.Cela bloque la page et ne garantit aucun ordre d'exécution spécifique.
• Les scripts avec un attributdefer sont chargés dans l'ordre et ne s'exécutent qu'une fois que tout a fini de se charger.
• Si vos scripts doivent être exécutés immédiatement et qu'ils n'ont aucune dépendance, utilisezasync.
• Si vos scripts doivent attendre l'analyse et dépendent d'autres scripts et/ou de la présence du DOM, chargez-les avecdefer et placez leurs éléments<script> dans l'ordre dans lequel vous souhaitez qu'ils soient exécutés par le navigateur.

Repli pour les modules

Les navigateurs qui prennent en charge la valeurmodule pour l'attributtype ignorent tout script avec un attributnomodule. Cela permet d'utiliser des scripts modules tout en fournissant des scripts de repli marquésnomodule pour les navigateurs qui ne les prennent pas en charge.

<script type="module" src="main.js"></script><script nomodule src="fallback.js"></script>

Importation de modules avec importmap

Lors de l'importation de modules dans des scripts, si vous n'utilisez pas la fonctionnalitétype=importmap, chaque module doit être importé à l'aide d'un spécificateur de module qui est soit une URL absolue, soit une URL relative.Dans l'exemple ci-dessous, le premier spécificateur de module est une URL absolue, tandis que le second ("./shapes/square.js") est résolu par rapport à l'URL de base du document.

import { name as circleName } from "https://example.com/shapes/circle.js";import { name as squareName, draw } from "./shapes/square.js";

Une carte d'importation (import map) permet de fournir une correspondance qui, si elle est trouvée, peut remplacer le texte dans le spécificateur de module.La carte d'importation ci-dessous définit les cléscircle etsquare qui peuvent être utilisées comme alias pour les spécificateurs de module ci-dessus.

<script type="importmap">  {    "imports": {      "circle": "https://example.com/shapes/circle.js",      "square": "./shapes/square.js"    }  }</script>

Cela permet d'importer des modules en utilisant des noms dans le spécificateur de module (plutôt que des URL absolues ou relatives).

import { name as circleName } from "circle";import { name as squareName, draw } from "square";

Pour plus d'exemples sur ce que vous pouvez faire avec les import maps, voir la sectionImporter des modules à l'aide des import maps du guide sur les modules JavaScript.

Intégrer des données dans du HTML

Vous pouvez également utiliser l'élément<script> pour intégrer des données dans du HTML avec un rendu côté serveur en spécifiant un type MIME valide autre que JavaScript dans l'attributtype.

<!-- Généré par le serveur --><script type="application/json">  {    "userId": 1234,    "userName": "Maria Cruz",    "memberSince": "2000-01-01T00:00:00.000Z"  }</script><!-- Statique --><script>  const userInfo = JSON.parse(document.getElementById("data").text);  console.log("Informations utilisateur·ice : %o", userInfo);</script>

Bloquer le rendu jusqu'à ce qu'un script soit récupéré et exécuté

Vous pouvez inclure le jetonrender dans un attributblocking ;le rendu de la page sera bloqué jusqu'à ce que le script soit récupéré et exécuté. Dans l'exemple ci-dessous, on bloque le rendu sur un script asynchrone,de sorte que le script ne bloque pas l'analyse mais soit garanti d'être évalué avant le début du rendu.

<script blocking="render" async src="async-script.js"></script>

Résumé technique

Spécifications

Compatibilité des navigateurs

Voir aussi

• La propriété JavaScriptdocument.currentScript
• Un article de Flavio Copes sur le chargement de ressources JavaScript et les différences entreasync etdefer^(angl.)
• Guide sur les modules JavaScript