cari

Rumah >hujung hadapan web >tutorial js >Bagaimanakah Saya Boleh Menggunakan JavaScript untuk Memasukkan Pengepala dan Pengaki Dikongsi Merentas Berbilang Halaman HTML?

Bagaimanakah Saya Boleh Menggunakan JavaScript untuk Memasukkan Pengepala dan Pengaki Dikongsi Merentas Berbilang Halaman HTML?

DDD
DDDasal
2024-12-02 14:43:11749semak imbas

How Can I Use JavaScript to Include Shared Headers and Footers Across Multiple HTML Pages?

Termasuk Pengepala dan Pengaki Dikongsi dalam Berbilang Halaman HTML dengan JavaScript

Dalam bidang pembangunan web, selalunya perlu membuat bahagian pengepala dan pengaki yang biasa merentas berbilang halaman HTML. Ini bukan sahaja menyelaraskan penciptaan halaman tetapi juga memastikan konsistensi dalam reka bentuk tapak web.

Menggunakan JavaScript untuk Memasukkan Fail Pengepala dan Pengaki

Walaupun tugas ini boleh dicapai menggunakan pelbagai rangka kerja, kami juga boleh mencapainya dengan berkesan hanya menggunakan HTML dan JavaScript. Masukkan jQuery, perpustakaan JavaScript teguh yang memudahkan manipulasi DOM dan permintaan tak segerak.

Pelaksanaan

1. Mencipta Fail Index.html:

<html>
<head>
    <title></title>
    <script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script>
    <script>
        $(function() {
            $("#header").load("header.html");
            $("#footer").load("footer.html");
        });
    </script>
</head>
<body>
    <div>

2. Mencipta Fail header.html dan footer.html:

<!-- header.html -->
<a href="http://www.google.com">click here for google</a>

<!-- footer.html -->
<a href="http://www.google.com">click here for google</a>

Penjelasan

Fail index.html mengandungi div pengepala dan pengaki, yang akan diisi menggunakan kaedah load() dalam jQuery. Coretan jQuery dilaksanakan apabila halaman dimuatkan dan secara tak segerak mendapatkan semula kandungan header.html dan footer.html dan memasukkannya ke dalam elemen div masing-masing.

Kelebihan

Pendekatan ini menyediakan beberapa faedah:

  • Kebolehgunaan semula: Pengepala dan pengaki boleh disertakan dalam seberapa banyak halaman HTML yang diperlukan, menghapuskan keperluan untuk pengekodan berulang.
  • Penyelenggaraan Mudah: Jika terdapat sebarang perubahan pada bahagian yang dikongsi, ia boleh dibuat di satu lokasi dan ditunjukkan di semua halaman.
  • Kemerdekaan daripada Rangka Kerja: Teknik ini tidak bergantung pada rangka kerja luaran, menjadikannya boleh diakses dalam julat persekitaran yang lebih luas.

Dengan menggunakan JavaScript , anda boleh membuat halaman pengepala dan pengaki biasa dengan mudah yang meningkatkan ketekalan dan kebolehselenggaraan reka bentuk tapak web anda.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Menggunakan JavaScript untuk Memasukkan Pengepala dan Pengaki Dikongsi Merentas Berbilang Halaman HTML?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

JavaScript jquery html if for include using dom this location
Kenyataan：
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
Artikel sebelumnya：Pemilihan Elemen JavaScript: Bila hendak menggunakan `querySelector` lwn. `getElementById`?Artikel seterusnya：Pemilihan Elemen JavaScript: Bila hendak menggunakan `querySelector` lwn. `getElementById`?

Artikel berkaitan

Lihat lagi