简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
Maison
Article
Questions et réponses
Cours
Sujet
Télécharger
Jeu
Dictionnaire
mises à jour récentes

Maison  >  Article  >  interface Web  >  Comment introduire du js externe en HTML

Comment introduire du js externe en HTML

下次还敢
下次还敢original
2024-04-11 06:18:32814parcourir

Pour inclure un fichier JS externe en HTML, utilisez la balise <script> et précisez l'URL du fichier à charger. Vous pouvez également spécifier des attributs de type, defer ou async pour contrôler la manière dont le chargement et l'exécution se produisent. En règle générale, la balise <script> doit être placée en bas de la section <body> pour éviter de bloquer le rendu de la page.

Comment introduire du js externe en HTML

Comment introduire du JS externe en HTML

L'introduction de fichiers JS externes en HTML est une pratique courante qui vous permet d'organiser le code JavaScript en fichiers séparés et de le répartir facilement sur plusieurs pages pour les réutiliser. Voici comment importer des fichiers JS externes :

  1. Utilisez la balise <script> <script> 标签

使用 <script> 标签来引入外部 JS 文件。该标签的 src 属性指定要加载的脚本文件的 URL：

<code class="html"><script src="path/to/script.js"></script></code>
  1. 指定 type 属性（可选）

为了明确地指定正在加载的文件类型，您可以使用 type 属性：

<code class="html"><script src="path/to/script.js" type="text/javascript"></script></code>
  1. 指定 defer 或 async 属性（可选）

defer 和 async 属性用于控制脚本加载和执行的方式：

  • defer：表明脚本可以在页面解析完成后加载，但会在 DOMContentLoaded 事件触发之前执行。
  • async：表明脚本可以异步加载并执行，不受页面解析或 DOMContentLoaded 事件的影响。
<code class="html"><script src="path/to/script.js" defer></script>
<script src="path/to/script.js" async></script></code>
  1. 放置 <script> 标签

通常，<script> 标签应放置在 HTML 文档的 <body> 部分的底部，以避免阻塞页面渲染。这样做可以确保所有 HTML 元素都在加载脚本之前被解析。

  1. 加载多个脚本（可选）

要加载多个外部 JS 文件，只需在 <head> 或 <body> 部分中添加额外的 <script> 标签即可。

注意：

  • 确保外部 JS 文件的 URL 正确且脚本文件可访问。
  • 脚本文件应该以 .js
  • Utilisez la balise <script> pour importer des fichiers JS externes : Fichiers JS. L'attribut src de cette balise précise l'URL du fichier script à charger :
    • rrreee
    🎜Spécifiez l'attribut type (facultatif) 🎜🎜🎜Pour spécifier explicitement le type de fichier en cours de chargement, vous pouvez utiliser l'attribut type : 🎜rrreee
      🎜🎜Spécifiez defer code> ou attribut <code>async (facultatif) 🎜🎜
    🎜 Les attributs defer et async sont utilisés pour contrôler la façon dont les scripts sont chargés et exécuté : 🎜
    🎜defer : indique que le script peut être chargé une fois l'analyse de la page terminée, mais sera exécuté avant le déclenchement de l'événement DOMContentLoaded. 🎜🎜async : indique que le script peut être chargé et exécuté de manière asynchrone et n'est pas affecté par l'analyse de la page ou les événements DOMContentLoaded. 🎜🎜rrreee
    🎜🎜Placez la balise <script> 🎜🎜
🎜Normalement, la balise <script> devrait être placé en bas de la section <body> du document HTML pour éviter de bloquer le rendu de la page. Cela garantit que tous les éléments HTML sont analysés avant le chargement du script. 🎜
    🎜🎜Charger plusieurs scripts (facultatif)🎜🎜
🎜Pour charger plusieurs fichiers JS externes, ajoutez simplement <head> ou <script> supplémentaire dans la section code><body>. 🎜🎜🎜Remarque : 🎜🎜
    🎜Assurez-vous que l'URL du fichier JS externe est correcte et que le fichier de script est accessible. 🎜🎜Les fichiers script doivent se terminer par l'extension .js. 🎜🎜Si votre script dépend d'autres scripts, assurez-vous de les charger dans le bon ordre. 🎜🎜

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

JavaScript html JS 事件 异步
Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Comment lier des CSS externes en HTMLArticle suivant：Comment lier des CSS externes en HTML

Articles Liés

Voir plus