Bagaimanakah Saya Boleh Menggunakan Semula Fail Pengepala dan Pengaki Merentasi Berbilang Halaman HTML Menggunakan JavaScript?

Menggabungkan Fail Pengepala dan Pengaki Biasa Merentasi Berbilang Halaman HTML

Bolehkah bahagian pengepala dan pengaki halaman web disertakan dalam beberapa halaman lain halaman secara berasingan?

Sudah tentu! Dengan memanfaatkan JavaScript, anda boleh memasukkan fail pengepala dan pengaki biasa ke dalam berbilang halaman HTML dengan mudah.

Cara Memasukkan Fail Pengepala dan Pengaki Menggunakan HTML dan JavaScript

1. Buat fungsi JavaScript: Dalam halaman HTML yang anda ingin masukkan kandungan pengepala dan pengaki biasa, panggil fungsi JavaScript untuk memuatkan fail luaran ini. Contoh:

<script>
function loadHeaderFooter() {
  $("#header").load("header.html");
  $("#footer").load("footer.html");
}
</script>

2. Letakkan fungsi loadHeaderFooter dalam halaman HTML: Pastikan bahawa panggilan fungsi loadHeaderFooter diletakkan di dalam elemen halaman.
3. Tambah elemen div untuk pengepala dan pengaki: Cipta dan ubah suai elemen HTML yang akan berfungsi sebagai ruang letak untuk kandungan pengepala dan pengaki yang dimuatkan secara luaran:

<div>
<ol start="4"><li>
<strong>Panggil fungsi loadHeaderFooter pada halaman muat</strong>: Gunakan jQuery untuk melaksanakan fungsi loadHeaderFooter apabila halaman telah selesai dimuatkan:</li></ol>
<pre class="brush:php;toolbar:false"><script>
$(document).ready(loadHeaderFooter);
</script>

5. Buat fail header.html dan footer.html: Dengan mengandaikan fail ini wujud dalam direktori yang sama dengan halaman HTML utama anda, anda boleh membenamkan kandungan pengepala dan pengaki yang dikehendaki dalam fail HTML berasingan ini.

Contoh:

header.html

<a href="http://www.example.com">Header Link</a>

footer.html

<p>Copyright 2023</p>

Faedah Menggunakan Pengepala dan Pengaki Luaran Fail:

• Kebolehgunaan semula kod: Kurangkan kod berulang dan tingkatkan kebolehselenggaraan.
• Reka Bentuk Konsisten: Pastikan pengepala dan pengaki seragam penampilan merentasi berbilang halaman.
• Skalabiliti: Kemas kini atau ubah suai kandungan pengepala dan pengaki dengan mudah tanpa menjejaskan berbilang halaman.