mozilla

Revision 413453 of <script>

  • Raccourci de la révision : Web/HTML/Element/script
  • Titre de la révision : <script>
  • ID de la révision : 413453
  • Créé :
  • Créateur : SphinxKnight
  • Version actuelle ? Non
  • Commentaire

Contenu de la révision

Résumé

L'élément HTML script est utilisé pour intégrer ou faire référence à un script exécutable au sein d'un document HTML ou XHTML.

Les scripts sans attribut async ou defer sont chargés et exécutés immédiatement avant que la navigateur continue l'analyse de la page.

Attributs

Cet élément inclue les attributs globaux.

{{htmlattrdef("async")}} {{HTMLVersionInline(5)}}
Réglez cet attribut booléen afin d'indiquer si le navigateur doit, dans la mesure du possible, exécuter les scripts de manière asynchrone. Cela n'a pas d'effet sur les scripts n'ayant pas d'attribut src. Dans les navigateurs plus anciens ne supportant pas l'attribut async, les scripts insérés par d'autres scripts bloquent le parseur. Dans ces navigateurs-là, Internet Explorer et Webkit exécutent ces scripts insérés par d'autres scripts de manière asynchrone alors que les versions d'Opera et celles de Firefox (avant la version 4.0) les exécutaient de manière synchrone. Dans Firefox 4.0, la valeur par défaut de la propriété DOM async est  true pour les scripts générés par des scripts, son comportement par défaut correspondant alors avec celui de IE et WebKit. 
Afin que les scripts insérés via des scripts externes s'exécutent dans l'ordre de leur insertion dans les navigateurs où la valeur de document.createElement("script").async est true (comme Firefox 4.0), passez la valeur .async=false aux scripts dont vous souhaitez conserver l'ordre. N'appelez jamais la méthode document.write() depuis un script async. Dans Gecko 1.9.2, appeler cette méthode depuis un tel script a un effet imprévisible. Dans Gecko 2.0, appeler cette méthode depuis un tel script n'a pas d'effet (en dehors d'afficher un message d'avertissement dans la console).
{{htmlattrdef("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. Les éléments script avec un attribut src défini ne doivent pas avoir de script compris dans leurs balises.
{{htmlattrdef("type")}}
Cet attribut définit le langage de script utilisé par un script au sein d'un élément script ou dont la référence est faite via l'attribut src. Ceci est défini comme un type MIME. Des exemples de types MIME supportés sont text/javascript, text/ecmascript, application/javascript et application/ecmascript. Si cet attribut est absent, le script est interprété comme étant en JavaScript.
{{htmlattrdef("language")}} {{Deprecated_inline}}
Comme l'attribut type, cet attribut spécifie le langage de script utilisé. Cependant, contrairement à l'attribut type les valeurs possibles de cet attribut n'ont jamais été normalisées. Il est recommandé d'utiliser l'attribut type plutôt que celui-là.
{{htmlattrdef("defer")}}
Cet attribut booléen permet d'indiquer au navigateur si le script doit être exécuté après l'analyse du document. Étant donné que cette fonctionnalité n'a pas été implémentée par les principaux navigateurs en dehors de Firefox, les utilisateurs ne devraient pas avoir de certitude quant au fait que l'exécution du script soit vraiment reportée. Il ne faut jamais appeler la méthode document.write() depuis un script dont l'exécution est reportée de cette manière (depuis Gecko 1.9.2, cela détruira le document). Cet attribut ne doit pas être utilisé pour des scripts n'ayant pas l'attribut src. Depuis  Gecko 1.9.2, l'attribut defer est ignoré sur les scripts sans attribut src. Cependant, avec Gecko 1.9.1 même les scripts en page sont exécutés de manière tardive si leur attribut defer est à true.
{{htmlattrdef("crossorigin")}} {{Non-standard_inline}}
Les balises de script classiques enverront un minimum d'informations à window.onerror ence ce qui concernent les scripts ne respectant pas les contrôles standard du CORS. Afin de disposer de plus de renseignements sur les erreurs pour les sites utilisant des domaines séparés pour des documents statiques, plusieurs navigateurs utilisent l'attribut crossorigin pour les scripts en utilisant la même définition que pour l'attribut crossorigin pour les images. Les efforts pour la standardisation de cet attribut sont en cours sur la liste de distribution du WHATWG.

Exemples

<!-- HTML4 et (x)HTML -->
<script type="text/javascript" src="javascript.js">

<!-- HTML5 -->
<script src="javascript.js"></script>

Spécifications

Spécification Statut Commentaires
{{SpecName('HTML5 W3C', 'scripting-1.html#script', '<script>')}} {{Spec2('HTML5 W3C')}}  
{{SpecName('HTML4.01', 'interact/scripts.html#h-18.2.1', '<script>')}} {{Spec2('HTML4.01')}}  

Compatibilité des navigateurs

{{CompatibilityTable}}

Fonctionnalité Chrome Firefox (Gecko) Internet Explorer Opera Safari
Support simple 1.0 {{CompatGeckoDesktop("1.0")}} {{CompatVersionUnknown}} {{CompatVersionUnknown}} {{CompatVersionUnknown}}
Attribut async {{CompatVersionUnknown}} {{CompatGeckoDesktop("1.9.2")}} 10 {{CompatNo}} {{CompatVersionUnknown}}
Attribut defer {{CompatVersionUnknown}} {{CompatGeckoDesktop("1.9.1")}}

4 (follows a spec of its own)

10 (by the spec)

{{CompatNo}} {{CompatVersionUnknown}}
Attribut crossorigin {{WebKitBug(81438)}} {{CompatGeckoDesktop("13")}} {{bug(696301)}} {{CompatNo}} 12.50 {{WebKitBug(81438)}}
Fonctionnalité Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Support simple {{CompatVersionUnknown}} {{CompatGeckoMobile("1.0")}} {{CompatVersionUnknown}} {{CompatVersionUnknown}} {{CompatVersionUnknown}}
Attribut async {{CompatVersionUnknown}} {{CompatGeckoMobile("1.0")}} {{CompatNo}} {{CompatUnknown}} {{CompatVersionUnknown}}
Attribut defer {{CompatVersionUnknown}} {{CompatGeckoMobile("1.0")}} {{CompatNo}} {{CompatUnknown}} {{CompatVersionUnknown}}

Notes spécifiques à Gecko

À partir de Gecko 2.0 {{geckoRelease("2.0")}}, insérer des éléments de script ayant été créés via l'appel de document.createElement("script") dans le DOM n'implique pas que l'ordre de l'exécution suive celui des insertions. Ce changement permet à Gecko de mieux se conformer à la spécification HTML5. Afin que les scripts insérés par des scripts externes s'exécutent en suivant l'ordre de leur insertion, réglez leur attribut async à false.

Les éléments {{HTMLElement("script")}} contenus dans des éléments {{HTMLElement("iframe")}}, {{HTMLElement("noembed")}}  ou {{HTMLElement("noframes")}} sont maintenant également exécutés pour les mêmes raisons.

Voir aussi

Source de la révision

<h2 id="R.C3.A9sum.C3.A9">Résumé</h2>
<p>L'élément HTML <code>script</code> est utilisé pour intégrer ou faire référence à un script exécutable au sein d'un document <abbr title="Hypertext Markup Language">HTML</abbr> ou <abbr title="Extensible Hypertext Markup Language">XHTML</abbr>.</p>
<p>Les scripts sans attribut <code>async</code> ou <code>defer</code> sont chargés et exécutés immédiatement avant que la navigateur continue l'analyse de la page.</p>
<ul class="htmlelt">
  <li><dfn><a href="/en-US/docs/HTML/Content_categories" title="HTML/Content_categories">Catégories de contenu </a></dfn><a href="/fr/docs/HTML/Cat%C3%A9gorie_de_contenu#Contenu_de_flux" title="https://developer.mozilla.org/fr/docs/HTML/Cat%C3%A9gorie_de_contenu#Contenu_de_flux">Contenu de flux</a>, <a href="/fr/docs/HTML/Cat%C3%A9gorie_de_contenu#Contenu_phras.C3.A9" title="/fr/docs/HTML/Cat%C3%A9gorie_de_contenu#Contenu_phras.C3.A9">contenu phrasé</a>, <a href="/fr/docs/HTML/Cat%C3%A9gorie_de_contenu#Contenu_metadata/en-US/docs/HTML/Content_categories#Metadata_content" title="/fr/docs/HTML/Cat%C3%A9gorie_de_contenu#Contenu_metadata">contenu de méta-données</a><a href="/fr/docs/HTML/Cat%C3%A9gorie_de_contenu#Contenu_phras.C3.A9" title="/fr/docs/HTML/Cat%C3%A9gorie_de_contenu#Contenu_phras.C3.A9"> </a></li>
  <li><dfn>Contenu autorisé </dfn>Script dynamique tel que <code>text/javascript</code>.</li>
  <li><dfn>Omission de balises </dfn> {{no_tag_omission}}</li>
  <li><dfn>Éléments parents autorisés </dfn> Tout élément acceptant du <a href="/fr/docs/HTML/Cat%C3%A9gorie_de_contenu#Contenu_metadata/en-US/docs/HTML/Content_categories#Metadata_content" title="/fr/docs/HTML/Cat%C3%A9gorie_de_contenu#Contenu_metadata">contenu de méta-données</a> ou tout élément acceptant du <a href="/fr/docs/HTML/Cat%C3%A9gorie_de_contenu#Contenu_phras.C3.A9" title="/fr/docs/HTML/Cat%C3%A9gorie_de_contenu#Contenu_phras.C3.A9">contenu phrasé</a>.</li>
  <li><dfn>Interface DOM </dfn> {{domxref("HTMLScriptElement")}}</li>
</ul>
<h2>Attributs</h2>
<p><span style="line-height: 21px;">Cet élément inclue les </span><a href="/fr/docs/HTML/Global_attributes" style="line-height: 21px;" title="/fr/docs/HTML/Global_attributes">attributs globaux</a><span style="line-height: 21px;">.</span></p>
<dl>
  <dt>
    {{htmlattrdef("async")}} {{HTMLVersionInline(5)}}</dt>
  <dd>
    Réglez cet attribut booléen afin d'indiquer si le navigateur doit, dans la mesure du possible, exécuter les scripts de manière asynchrone. Cela n'a pas d'effet sur les scripts n'ayant pas d'attribut <strong>src</strong>. Dans les navigateurs plus anciens ne supportant pas l'attribut <strong>async</strong>, les scripts insérés par d'autres scripts bloquent le parseur. Dans ces navigateurs-là, Internet Explorer et Webkit exécutent ces scripts insérés par d'autres scripts de manière asynchrone alors que les versions d'Opera et celles de Firefox (avant la version 4.0) les exécutaient de manière synchrone. Dans Firefox 4.0, la valeur par défaut de la propriété DOM <code>async</code> est&nbsp; <code>true</code> pour les scripts générés par des scripts, son comportement par défaut correspondant alors avec celui de IE et WebKit.&nbsp;</dd>
  <dd>
    Afin que les scripts insérés via des scripts externes s'exécutent dans l'ordre de leur insertion dans les navigateurs où la valeur de&nbsp;<code>document.createElement("script").async</code> est <code>true</code> (comme Firefox 4.0), passez la valeur <code>.async=false</code> aux scripts dont vous souhaitez conserver l'ordre. N'appelez jamais la méthode<code> document.write()</code> depuis un script <code>async</code>. Dans Gecko 1.9.2, appeler cette méthode depuis un tel script a un effet imprévisible. Dans Gecko 2.0, appeler cette méthode depuis un tel script n'a pas d'effet (en dehors d'afficher un message d'avertissement dans la console).</dd>
  <dt>
    {{htmlattrdef("src")}}</dt>
  <dd>
    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. Les éléments <code>script</code> avec un attribut <code>src</code> défini ne doivent pas avoir de script compris dans leurs balises.</dd>
  <dt>
    {{htmlattrdef("type")}}</dt>
  <dd>
    Cet attribut définit le langage de script utilisé par un script au sein d'un élément <code>script</code> ou dont la référence est faite via l'attribut <code>src</code>. Ceci est défini comme un type <abbr title="Multi-purpose Internet Mail Extensions">MIME</abbr>. Des exemples de types <abbr title="Multi-purpose Internet Mail Extensions">MIME</abbr> supportés sont <code>text/javascript</code>, <code>text/ecmascript</code>, <code>application/javascript</code> et <code>application/ecmascript</code>. Si cet attribut est absent, le script est interprété comme étant en JavaScript.</dd>
  <dt>
    {{htmlattrdef("language")}} {{Deprecated_inline}}</dt>
  <dd>
    Comme l'attribut <code>type</code>, cet attribut spécifie le langage de script utilisé. Cependant, contrairement à l'attribut <code>type</code> les valeurs possibles de cet attribut n'ont jamais été normalisées. Il est recommandé d'utiliser l'attribut <code>type</code> plutôt que celui-là.</dd>
  <dt>
    {{htmlattrdef("defer")}}</dt>
  <dd>
    Cet attribut booléen permet d'indiquer au navigateur si le script doit être exécuté après l'analyse du document. Étant donné que cette fonctionnalité n'a pas été implémentée par les principaux navigateurs en dehors de Firefox, les utilisateurs ne devraient pas avoir de certitude quant au fait que l'exécution du script soit vraiment reportée. Il ne faut jamais appeler la méthode <code>document.write()</code> depuis un script dont l'exécution est reportée de cette manière (depuis Gecko 1.9.2, cela détruira le document). Cet attribut ne doit pas être utilisé pour des scripts n'ayant pas l'attribut <code>src</code>. Depuis&nbsp; Gecko 1.9.2, l'attribut <code>defer</code> est ignoré sur les scripts sans attribut <code>src</code>. Cependant, avec Gecko 1.9.1 même les scripts en page sont exécutés de manière tardive si leur attribut <code>defer</code> est à <code>true</code>.</dd>
  <dt>
    {{htmlattrdef("crossorigin")}} {{Non-standard_inline}}</dt>
  <dd>
    Les balises de <code>script</code> classiques enverront un minimum d'informations à <a href="/fr/docs/DOM/window.onerror">window.onerror</a> ence ce qui concernent les scripts ne respectant pas les contrôles standard du <a href="/fr/docs/HTTP/Access_control_CORS">CORS</a>. Afin de disposer de plus de renseignements sur les erreurs pour les sites utilisant des domaines séparés pour des documents statiques, plusieurs navigateurs utilisent l'attribut <code>crossorigin</code> pour les scripts en utilisant la même définition que pour l'<a href="/fr/docs/HTML/Element/img#Attributs">attribut crossorigin pour les images</a>. Les efforts pour la standardisation de cet attribut sont en cours sur <a href="http://lists.whatwg.org/pipermail/whatwg-whatwg.org/2012-February/034969.html">la liste de distribution du WHATWG</a>.</dd>
</dl>
<h2 id="Exemples">Exemples</h2>
<pre class="brush: html">
&lt;!-- HTML4 et (x)HTML --&gt;
&lt;script type="text/javascript" src="javascript.js"&gt;

&lt;!-- HTML5 --&gt;
&lt;script src="javascript.js"&gt;&lt;/script&gt;
</pre>
<h2 id="Sp.C3.A9cifications">Spécifications</h2>
<table class="standard-table" height="75" width="526">
  <thead>
    <tr>
      <th scope="col">Spécification</th>
      <th scope="col">Statut</th>
      <th scope="col">Commentaires</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>{{SpecName('HTML5 W3C', 'scripting-1.html#script', '&lt;script&gt;')}}</td>
      <td>{{Spec2('HTML5 W3C')}}</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td>{{SpecName('HTML4.01', 'interact/scripts.html#h-18.2.1', '&lt;script&gt;')}}</td>
      <td>{{Spec2('HTML4.01')}}</td>
      <td>&nbsp;</td>
    </tr>
  </tbody>
</table>
<h2 id="Compatibilit.C3.A9_des_navigateurs">Compatibilité des navigateurs</h2>
<p>{{CompatibilityTable}}</p>
<div id="compat-desktop">
  <table class="compat-table">
    <tbody>
      <tr>
        <th>Fonctionnalité</th>
        <th>Chrome</th>
        <th>Firefox (Gecko)</th>
        <th>Internet Explorer</th>
        <th>Opera</th>
        <th>Safari</th>
      </tr>
      <tr>
        <td>Support simple</td>
        <td>1.0</td>
        <td>{{CompatGeckoDesktop("1.0")}}</td>
        <td>{{CompatVersionUnknown}}</td>
        <td>{{CompatVersionUnknown}}</td>
        <td>{{CompatVersionUnknown}}</td>
      </tr>
      <tr>
        <td>Attribut <code>async</code></td>
        <td>{{CompatVersionUnknown}}</td>
        <td>{{CompatGeckoDesktop("1.9.2")}}</td>
        <td>10</td>
        <td>{{CompatNo}}</td>
        <td>{{CompatVersionUnknown}}</td>
      </tr>
      <tr>
        <td>Attribut <code>defer</code></td>
        <td>{{CompatVersionUnknown}}</td>
        <td>{{CompatGeckoDesktop("1.9.1")}}</td>
        <td>
          <p>4 (follows a spec of its own)</p>
          <p>10 (by the spec)</p>
        </td>
        <td>{{CompatNo}}</td>
        <td>{{CompatVersionUnknown}}</td>
      </tr>
      <tr>
        <td>Attribut <code>crossorigin</code></td>
        <td>{{WebKitBug(81438)}}</td>
        <td>{{CompatGeckoDesktop("13")}} {{bug(696301)}}</td>
        <td>{{CompatNo}}</td>
        <td>12.50</td>
        <td>{{WebKitBug(81438)}}</td>
      </tr>
    </tbody>
  </table>
</div>
<div id="compat-mobile">
  <table class="compat-table">
    <tbody>
      <tr>
        <th>Fonctionnalité</th>
        <th>Android</th>
        <th>Firefox Mobile (Gecko)</th>
        <th>IE Mobile</th>
        <th>Opera Mobile</th>
        <th>Safari Mobile</th>
      </tr>
      <tr>
        <td>Support simple</td>
        <td>{{CompatVersionUnknown}}</td>
        <td>{{CompatGeckoMobile("1.0")}}</td>
        <td>{{CompatVersionUnknown}}</td>
        <td>{{CompatVersionUnknown}}</td>
        <td>{{CompatVersionUnknown}}</td>
      </tr>
      <tr>
        <td>Attribut <code>async</code></td>
        <td>{{CompatVersionUnknown}}</td>
        <td>{{CompatGeckoMobile("1.0")}}</td>
        <td>{{CompatNo}}</td>
        <td>{{CompatUnknown}}</td>
        <td>{{CompatVersionUnknown}}</td>
      </tr>
      <tr>
        <td>Attribut <code>defer</code></td>
        <td>{{CompatVersionUnknown}}</td>
        <td>{{CompatGeckoMobile("1.0")}}</td>
        <td>{{CompatNo}}</td>
        <td>{{CompatUnknown}}</td>
        <td>{{CompatVersionUnknown}}</td>
      </tr>
    </tbody>
  </table>
</div>
<h3 id="Notes_sp.C3.A9cifiques_.C3.A0_Gecko">Notes spécifiques à Gecko</h3>
<p>À partir de Gecko 2.0 {{geckoRelease("2.0")}}, insérer des éléments de script ayant été créés via l'appel de document.createElement("script") dans le DOM n'implique pas que l'ordre de l'exécution suive celui des insertions. Ce changement permet à Gecko de mieux se conformer à la spécification HTML5. Afin que les scripts insérés par des scripts externes s'exécutent en suivant l'ordre de leur insertion, réglez leur attribut <code>async</code> à <code>false</code>.</p>
<p>Les éléments {{HTMLElement("script")}} contenus dans des éléments {{HTMLElement("iframe")}}, {{HTMLElement("noembed")}}&nbsp; ou {{HTMLElement("noframes")}} sont maintenant également exécutés pour les mêmes raisons.</p>
<h2 id="Voir_aussi">Voir aussi</h2>
<ul>
  <li>{{domxref("document.currentScript")}}</li>
  <li><a href="http://pieisgood.org/test/script-link-events/">Le tableau de compatibilité sur les événements des nœuds &lt;script&gt; et &lt;link&gt; de Ryan Grove </a></li>
</ul>
Revenir à cette révision