简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
Heim
Artikel
Fragen und Antworten
Kurs
Thema
Herunterladen
Spiel
Wörterbuch
kürzliche Updates

Heim  >  Artikel  >  Web-Frontend  >  So führen Sie externe JS in HTML ein

So führen Sie externe JS in HTML ein

下次还敢
下次还敢Original
2024-04-11 06:18:32816Durchsuche

Um eine externe JS-Datei in HTML einzubinden, verwenden Sie das <script>-Tag und geben Sie die URL der zu ladenden Datei an. Sie können auch Typ-, Verzögerungs- oder Asynchronattribute angeben, um zu steuern, wie das Laden und die Ausführung erfolgen. Normalerweise sollte das <script>-Tag am Ende des <body>-Tags platziert werden, um ein Blockieren der Seitendarstellung zu vermeiden.

So führen Sie externe JS in HTML ein

So führen Sie externe JS-Dateien in HTML ein

Die Einführung externer JS-Dateien in HTML ist eine gängige Praxis, die es Ihnen ermöglicht, JavaScript-Code in separaten Dateien zu organisieren und ihn einfach auf mehrere Seiten zu verteilen und diese wiederzuverwenden. So importieren Sie externe JS-Dateien:

  1. Verwenden Sie das Tag <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
  • Verwenden Sie das Tag <script>, um externe Dateien zu importieren JS-Dateien. Das Attribut src dieses Tags gibt die URL der zu ladenden Skriptdatei an:
    • rrreee
    🎜Geben Sie das Attribut type an (optional). 🎜🎜🎜Um den Typ der zu ladenden Datei explizit anzugeben, können Sie das Attribut type verwenden: 🎜rrreee
      🎜🎜Specify defer code> oder async-Attribut (optional) 🎜🎜
    🎜 Die Attribute defer und async werden verwendet, um zu steuern, wie Skripte geladen werden und ausgeführt: 🎜
    🎜defer: Gibt an, dass das Skript nach Abschluss der Seitenanalyse geladen werden kann, aber ausgeführt wird, bevor das DOMContentLoaded-Ereignis ausgelöst wird. 🎜🎜async: Zeigt an, dass das Skript asynchron geladen und ausgeführt werden kann und nicht von der Seitenanalyse oder DOMContentLoaded-Ereignissen betroffen ist. 🎜🎜rrreee
    🎜🎜Platzieren Sie das Tag <script> 🎜🎜
🎜Normalerweise sollte das Tag <script> verwendet werden am Ende des Abschnitts <body> des HTML-Dokuments platziert werden, um das Rendern der Seite nicht zu blockieren. Dadurch wird sichergestellt, dass alle HTML-Elemente analysiert werden, bevor das Skript geladen wird. 🎜
    🎜🎜Mehrere Skripte laden (optional)🎜🎜
🎜Um mehrere externe JS-Dateien zu laden, fügen Sie einfach <head> oder <script>-Tag im Abschnitt code><body>. 🎜🎜🎜Hinweis: 🎜🎜
    🎜Stellen Sie sicher, dass die URL der externen JS-Datei korrekt ist und auf die Skriptdatei zugegriffen werden kann. 🎜🎜Skriptdateien sollten mit der Erweiterung .js enden. 🎜🎜Wenn Ihr Skript von anderen Skripten abhängt, stellen Sie sicher, dass Sie diese in der richtigen Reihenfolge laden. 🎜🎜

Das obige ist der detaillierte Inhalt vonSo führen Sie externe JS in HTML ein. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

JavaScript html JS 事件 异步
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：So verlinken Sie externes CSS in HTMLNächster Artikel：So verlinken Sie externes CSS in HTML

In Verbindung stehende Artikel

Mehr sehen