Maison >interface Web >js tutoriel >Comment puis-je utiliser JavaScript pour inclure des en-têtes et des pieds de page communs sur plusieurs pages HTML ?

Comment puis-je utiliser JavaScript pour inclure des en-têtes et des pieds de page communs sur plusieurs pages HTML ?

Patricia Arquetteoriginal: 2024-12-05 06:06:18926parcourir

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

Inclure les fichiers d'en-tête et de pied de page communs dans plusieurs pages HTML avec JavaScript

Dans le développement Web, il est souvent nécessaire d'inclure des éléments communs, tels que en-têtes et pieds de page, sur plusieurs pages HTML pour maintenir la cohérence et l'organisation. Ceci peut être réalisé grâce à l'utilisation de JavaScript.

Utilisation de jQuery pour l'inclusion d'en-tête et de pied de page

Une méthode pour inclure des fichiers d'en-tête et de pied de page courants consiste à utiliser jQuery. Cette bibliothèque JavaScript offre un moyen simple et efficace de charger du contenu externe dans une page Web.

Création des fichiers HTML

Pour cette approche, vous devrez créer trois Fichiers HTML :

index.html : Contient le contenu principal et les emplacements pour l'en-tête et le pied de page. être inclus.
header.html : Contient le contenu de l'en-tête.
footer.html : Contient le contenu du pied de page.

index.html Code

<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>

header.html et footer.html Code

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

<!-- footer.html -->
<p>Copyright &copy; 2023</p>

Chargement de l'en-tête et du pied de page

Une fois les fichiers HTML créés, la méthode load() de jQuery est utilisée pour charger le contenu de manière asynchrone de header.html et footer.html dans les éléments #header et #footer de index.html, respectivement.

Lorsqu'un utilisateur visite index.html, le contenu de l'en-tête et du pied de page sera rendu sur la page, permettant une expérience utilisateur cohérente et cohérente sur plusieurs pages.

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 jquery html for include using this

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：JavaScript synchrone ou asynchrone simplifiéArticle suivant：JavaScript synchrone ou asynchrone simplifié

Articles Liés

Voir plus