HTMLScriptElement

Propriétés d'instance

Hérite des propriétés de son parent, HTMLElement.

HTMLScriptElement.attributionSrc Contexte sécurisé Expérimental

Obtient et définit l'attribut attributionsrc sur un élément <script> par programmation, reflétant la valeur de cet attribut. attributionsrc indique que vous souhaitez que le navigateur envoie un en-tête Attribution-Reporting-Eligible avec la requête de ressource du script. Côté serveur, cela sert à déclencher l'envoi d'un en-tête Attribution-Reporting-Register-Source ou Attribution-Reporting-Register-Trigger dans la réponse, afin d'enregistrer respectivement une source d'attribution ou un déclencheur d'attribution basé sur JavaScript.

HTMLScriptElement.async

Un booléen qui définit la façon dont le script doit être exécuté. Pour les scripts classiques, si la propriété async est à true, le script externe est récupéré en parallèle de l'analyse et évalué dès qu'il est disponible. Pour les modules, si la propriété async est à true, le script et toutes ses dépendances sont récupérés en parallèle de l'analyse et évalués dès qu'ils sont disponibles.

HTMLScriptElement.blocking

Une chaîne de caractères indiquant que certaines opérations doivent être bloquées lors de la récupération du script. Elle reflète l'attribut blocking de l'élément <script>.

HTMLScriptElement.charset Obsolète

Une chaîne de caractères représentant l'encodage du script externe. Elle reflète l'attribut charset.

HTMLScriptElement.crossOrigin

Une chaîne de caractères reflétant le paramètre CORS pour l'élément script. Pour les scripts classiques provenant d'autres origines, cela définit si les informations d'erreur seront exposées.

HTMLScriptElement.defer

Un booléen qui définit la façon dont le script doit être exécuté. Pour les scripts classiques, si la propriété defer est à true, le script externe est exécuté après l'analyse du document, mais avant le déclenchement de l'événement DOMContentLoaded. Pour les modules, la propriété defer n'a aucun effet.

HTMLScriptElement.event Obsolète

Une chaîne de caractères ; méthode obsolète pour enregistrer des gestionnaires d'événements sur les éléments d'un document HTML.

HTMLScriptElement.fetchPriority

Une chaîne de caractères optionnelle représentant une indication donnée au navigateur sur la priorité de récupération d'un script externe par rapport aux autres scripts externes. Si cette valeur est fournie, elle doit être l'une des valeurs autorisées : high pour une priorité élevée, low pour une priorité faible, ou auto pour indiquer aucune préférence (valeur par défaut). Elle reflète l'attribut fetchpriority de l'élément <script>.

HTMLScriptElement.integrity

Une chaîne de caractères contenant des métadonnées intégrées que le navigateur peut utiliser pour vérifier qu'une ressource récupérée n'a pas été modifiée de façon inattendue. Elle reflète l'attribut integrity de l'élément <script>.

HTMLScriptElement.noModule

Un booléen qui, si elle est vraie, empêche l'exécution du script dans les navigateurs qui prennent en charge les modules ES — utilisé pour exécuter des scripts de secours dans les anciens navigateurs qui ne prennent pas en charge les modules JavaScript.

HTMLScriptElement.referrerPolicy

Une chaîne de caractères reflétant l'attribut HTML referrerPolicy qui définit le référent à utiliser lors de la récupération du script et des requêtes effectuées par ce script.

HTMLScriptElement.src

Une chaîne de caractères représentant l'URL d'un script externe ; cela peut être utilisé comme alternative à l'intégration directe d'un script dans un document. Elle reflète l'attribut src de l'élément <script>.

HTMLScriptElement.text

Une chaîne de caractères qui concatène et retourne le contenu de tous les nœuds Text à l'intérieur de l'élément <script> (en ignorant les autres nœuds comme les commentaires) dans l'ordre de l'arbre. Lors de la définition, elle agit comme la propriété Node.textContent.

Note : Lorsqu'ils sont insérés avec la méthode Document.write(), les éléments <script> s'exécutent (généralement de façon synchrone), mais lorsqu'ils sont insérés avec Element.innerHTML ou Element.outerHTML, ils ne s'exécutent pas du tout.

HTMLScriptElement.type

Une chaîne de caractères représentant le type du script. Elle reflète l'attribut type de l'élément <script>.

Méthodes statiques

HTMLScriptElement.supports()

Retourne true si le navigateur prend en charge les scripts du type spécifié, et false sinon. Cette méthode fournit un moyen simple et unifié de détecter les fonctionnalités liées aux scripts.

Méthodes d'instance

Aucune méthode spécifique ; hérite des méthodes de son parent, HTMLElement.

Événements

Aucun événement spécifique ; hérite des événements de son parent, HTMLElement.

Exemples

Importation dynamique de scripts

Créons une fonction qui importe de nouveaux scripts dans un document en créant un nœud <script> juste avant le <script> qui héberge le code suivant (via document.currentScript). Ces scripts seront exécutés de façon asynchrone. Pour plus de détails, voir les propriétés defer et async.

function loadError(oError) {
  throw new URIError(
    `Le script ${oError.target.src} n'a pas pu être chargé correctement.`,
  );
}

function prefixScript(url, onloadFunction) {
  const newScript = document.createElement("script");
  newScript.onerror = loadError;
  if (onloadFunction) {
    newScript.onload = onloadFunction;
  }
  document.currentScript.parentNode.insertBefore(
    newScript,
    document.currentScript,
  );
  newScript.src = url;
}

La fonction suivante, au lieu d'insérer les nouveaux scripts juste avant l'élément document.currentScript, les ajoute comme enfants de la balise <head>.

function loadError(oError) {
  throw new URIError(
    `Le script ${oError.target.src} n'a pas pu être chargé correctement.`,
  );
}

function affixScriptToHead(url, onloadFunction) {
  const newScript = document.createElement("script");
  newScript.onerror = loadError;
  if (onloadFunction) {
    newScript.onload = onloadFunction;
  }
  document.head.appendChild(newScript);
  newScript.src = url;
}

Exemple d'utilisation :

affixScriptToHead("myScript1.js");
affixScriptToHead("myScript2.js", () => {
  alert('Le script "myScript2.js" a été chargé correctement.');
});

Vérification de la prise en charge d'un type de script

HTMLScriptElement.supports() fournit un mécanisme unifié pour vérifier si un navigateur prend en charge des types de scripts particuliers.

L'exemple ci-dessous montre comment vérifier la prise en charge des modules, en utilisant l'existence de l'attribut noModule comme solution de repli.

function checkModuleSupport() {
  if ("supports" in HTMLScriptElement) {
    return HTMLScriptElement.supports("module");
  }
  return "noModule" in document.createElement("script");
}

On suppose que les scripts classiques sont pris en charge par tous les navigateurs.

Spécifications

Compatibilité des navigateurs

Voir aussi

• L'élément HTML <script>
• L'élément HTML <noscript>
• document.currentScript
• Workers Web (extraits de code similaires aux scripts mais exécutés dans un autre contexte global)