Rumah hujung hadapan web html tutorial Bagaimana untuk memperkenalkan js luaran ke dalam html

Bagaimana untuk memperkenalkan js luaran ke dalam html

Apr 11, 2024 am 06:18 AM
Pemuatan tak segerak

Untuk memasukkan fail JS luaran dalam HTML, gunakan teg <skrip> Anda juga boleh menentukan jenis, tangguh atau atribut tak segerak untuk mengawal cara pemuatan dan pelaksanaan berlaku. Biasanya, teg <skrip> hendaklah diletakkan di bahagian bawah bahagian &lt;body&gt;

Bagaimana untuk memperkenalkan js luaran ke dalam html

Cara memperkenalkan JS luaran dalam HTML

Memperkenalkan fail JS luaran dalam HTML ialah amalan biasa yang membolehkan anda menyusun kod JavaScript ke dalam fail yang berasingan dan menyebarkannya dengan mudah merentasi berbilang halaman menggunakannya semula. Begini cara mengimport fail JS luaran:

  1. Gunakan teg &lt;script&gt; &lt;script&gt; 标签

使用 &lt;script&gt; 标签来引入外部 JS 文件。该标签的 src 属性指定要加载的脚本文件的 URL:

&lt;script src=&quot;path/to/script.js&quot;&gt;&lt;/script&gt;
Salin selepas log masuk
  1. 指定 type 属性(可选)

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

&lt;script src=&quot;path/to/script.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;
Salin selepas log masuk
  1. 指定 deferasync 属性(可选)

deferasync 属性用于控制脚本加载和执行的方式:

  • defer:表明脚本可以在页面解析完成后加载,但会在 DOMContentLoaded 事件触发之前执行。
  • async:表明脚本可以异步加载并执行,不受页面解析或 DOMContentLoaded 事件的影响。
&lt;script src=&quot;path/to/script.js&quot; defer&gt;&lt;/script&gt;
&lt;script src=&quot;path/to/script.js&quot; async&gt;&lt;/script&gt;
Salin selepas log masuk
  1. 放置 &lt;script&gt; 标签

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

  1. 加载多个脚本(可选)

要加载多个外部 JS 文件,只需在 &lt;head&gt;&lt;body&gt; 部分中添加额外的 &lt;script&gt; 标签即可。

注意:

  • 确保外部 JS 文件的 URL 正确且脚本文件可访问。
  • 脚本文件应该以 .js
  • Gunakan teg &lt;script&gt; untuk mengimport luaran fail JS. Atribut src teg ini menentukan URL fail skrip yang akan dimuatkan:
  • rrreee
    🎜Nyatakan atribut type (pilihan) 🎜🎜🎜Untuk menyatakan secara eksplisit jenis fail yang sedang dimuatkan, anda boleh menggunakan atribut type: 🎜rrreee
      🎜🎜Nyatakan tunda atribut kod&gt; atau async (pilihan) 🎜🎜
    🎜 Atribut defer dan async digunakan untuk mengawal cara skrip dimuatkan dan dilaksanakan: 🎜
    🎜tunda: Menunjukkan bahawa skrip boleh dimuatkan selepas penghuraian halaman selesai, tetapi akan dilaksanakan sebelum acara DOMContentLoaded dicetuskan. 🎜🎜async: Menunjukkan bahawa skrip boleh dimuatkan dan dilaksanakan secara tidak segerak dan tidak terjejas oleh penghuraian halaman atau peristiwa DOMContentLoaded. 🎜🎜rrreee
      🎜🎜Letakkan teg &lt;script&gt; 🎜🎜
    🎜Biasanya, teg &lt;script&gt; sepatutnya diletakkan di bahagian bawah bahagian &lt;body&gt; dokumen HTML untuk mengelak daripada menyekat pemaparan halaman. Melakukan ini memastikan bahawa semua elemen HTML dihuraikan sebelum skrip dimuatkan. 🎜
      🎜🎜Muat berbilang skrip (pilihan)🎜🎜
    🎜Untuk memuatkan berbilang fail JS luaran, cuma tambahkan &lt;head&gt; atau &lt;script&gt; tambahan dalam bahagian kod>&lt;body&gt;. 🎜🎜🎜Nota: 🎜🎜
      🎜Pastikan URL fail JS luaran adalah betul dan fail skrip boleh diakses. 🎜🎜Fail skrip hendaklah berakhir dengan sambungan .js. 🎜🎜Jika skrip anda bergantung pada skrip lain, pastikan anda memuatkannya dalam susunan yang betul. 🎜🎜

Atas ialah kandungan terperinci Bagaimana untuk memperkenalkan js luaran ke dalam html. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Tag artikel panas

Notepad++7.3.1

Notepad++7.3.1

Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina

SublimeText3 versi Cina

Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1

Hantar Studio 13.0.1

Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6

Dreamweaver CS6

Alat pembangunan web visual

SublimeText3 versi Mac

SublimeText3 versi Mac

Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Mendedahkan pengecualian Ajax dan senarai cara untuk menyelesaikan ralat Mendedahkan pengecualian Ajax dan senarai cara untuk menyelesaikan ralat Jan 30, 2024 am 08:33 AM

Mendedahkan pengecualian Ajax dan senarai cara untuk menyelesaikan ralat

Berurusan secara berkesan dengan situasi di mana jQuery .val() tidak berfungsi Berurusan secara berkesan dengan situasi di mana jQuery .val() tidak berfungsi Feb 20, 2024 pm 09:36 PM

Berurusan secara berkesan dengan situasi di mana jQuery .val() tidak berfungsi

Kaedah pelaksanaan pemuatan asynchronous Scrapy berdasarkan Ajax Kaedah pelaksanaan pemuatan asynchronous Scrapy berdasarkan Ajax Jun 22, 2023 pm 11:09 PM

Kaedah pelaksanaan pemuatan asynchronous Scrapy berdasarkan Ajax

Cara membaca html Cara membaca html Apr 05, 2024 am 08:36 AM

Cara membaca html

Penjelasan terperinci tentang fungsi penggantungan dalam Vue3: Mengoptimumkan pemuatan data tak segerak Penjelasan terperinci tentang fungsi penggantungan dalam Vue3: Mengoptimumkan pemuatan data tak segerak Jun 18, 2023 am 08:10 AM

Penjelasan terperinci tentang fungsi penggantungan dalam Vue3: Mengoptimumkan pemuatan data tak segerak

Penjelasan terperinci tentang fungsi defineAsyncComponent dalam Vue3: aplikasi komponen pemuatan tak segerak Penjelasan terperinci tentang fungsi defineAsyncComponent dalam Vue3: aplikasi komponen pemuatan tak segerak Jun 18, 2023 pm 07:39 PM

Penjelasan terperinci tentang fungsi defineAsyncComponent dalam Vue3: aplikasi komponen pemuatan tak segerak

c# Apakah itu delegasi dan apakah masalah yang diselesaikannya? c# Apakah itu delegasi dan apakah masalah yang diselesaikannya? Apr 04, 2024 pm 12:42 PM

c# Apakah itu delegasi dan apakah masalah yang diselesaikannya?

Bagaimana untuk mengelakkan pengalihan halaman dalam WordPress? Bagaimana untuk mengelakkan pengalihan halaman dalam WordPress? Mar 05, 2024 am 09:33 AM

Bagaimana untuk mengelakkan pengalihan halaman dalam WordPress?

See all articles