Je veux créer des pages communes d'en-tête et de pied de page qui sont incluses dans plusieurs pages html.
J'aimerais utiliser le javascript. Existe-t-il un moyen de le faire en utilisant uniquement html et JavaScript ?
Je veux charger une page d'en-tête et de pied de page dans une autre page html.
Vous pouvez y parvenir avec jquery .
Placez ce code dans 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 id="header"></div>
<!--Remaining section-->
<div id="footer"></div>
</body>
</html>et mettez ce code dans header.html y footer.html au même endroit que index.html
<a href="http://www.google.com">click here for google</a>Maintenant, quand vous visitez index.html vous devriez être en mesure de cliquer sur les balises du lien.
J'ajoute les parties communes comme en-tête et pied de page en utilisant Inclus côté serveur . Aucun HTML et aucun JavaScript ne sont nécessaires. Au lieu de cela, le serveur Web ajoute automatiquement le code inclus avant de faire quoi que ce soit d'autre.
Ajoutez simplement la ligne suivante à l'endroit où vous souhaitez inclure votre fichier :
<!--#include file="include_head.html" -->
Devez-vous utiliser la structure de fichier html avec JavaScript ? Avez-vous envisagé d'utiliser PHP à la place afin de pouvoir utiliser le simple objet PHP include ?
Si vous convertissez les noms de fichiers de vos pages .html en .php, vous pouvez utiliser une ligne de code en haut de chacune de vos pages .php pour inclure le contenu de votre header.php.
<?php include('header.php'); ?>Faites de même dans le pied de page de chaque page pour inclure le contenu de votre fichier footer.php.
<?php include('footer.php'); ?>Pas de JavaScript / Jquery ou de fichiers supplémentaires inclus requis.
NB Vous pouvez également convertir vos fichiers .html en fichiers .php en utilisant ce qui suit dans votre fichier .htaccess
# re-write html to php
RewriteRule ^(.*)\.html$ $1.php [L]
RewriteRule ^(.+)/$ http://%{HTTP_HOST}/$1 [R=301,L]
# re-write no extension to .php
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^([^\.]+)$ $1.php [NC,L]
Vous pourriez aussi mettre : (load_essentials.js :)
document.getElementById("myHead").innerHTML =
"<span id='headerText'>Title</span>"
+ "<span id='headerSubtext'>Subtitle</span>";
document.getElementById("myNav").innerHTML =
"<ul id='navLinks'>"
+ "<li><a href='index.html'>Home</a></li>"
+ "<li><a href='about.html'>About</a>"
+ "<li><a href='donate.html'>Donate</a></li>"
+ "</ul>";
document.getElementById("myFooter").innerHTML =
"<p id='copyright'>Copyright © " + new Date().getFullYear() + " You. All"
+ " rights reserved.</p>"
+ "<p id='credits'>Layout by You</p>"
+ "<p id='contact'><a href='mailto:you@you.com'>Contact Us</a> / "
+ "<a href='mailto:you@you.com'>Report a problem.</a></p>";
<!--HTML-->
<header id="myHead"></header>
<nav id="myNav"></nav>
Content
<footer id="myFooter"></footer>
<script src="load_essentials.js"></script>
J'ai essayé ça : Créer un fichier en-tête.html comme
<!-- Meta -->
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<!-- JS -->
<script type="text/javascript" src="js/lib/jquery-1.11.1.min.js" ></script>
<script type="text/javascript" src="js/lib/angular.min.js"></script>
<script type="text/javascript" src="js/lib/angular-resource.min.js"></script>
<script type="text/javascript" src="js/lib/angular-route.min.js"></script>
<link rel="stylesheet" href="css/bootstrap.min.css">
<title>Your application</title>Inclure maintenant en-tête.html dans vos pages HTML comme :
<head>
<script type="text/javascript" src="js/lib/jquery-1.11.1.min.js" ></script>
<script>
$(function(){ $("head").load("header.html") });
</script>
</head>Fonctionne parfaitement bien.
Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.
