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.
Pour une installation rapide avec un simple javascript et parce qu'il n'y a pas encore de réponse, vous pouvez également utiliser un fichier de type .js pour stocker vos pièces redondantes (modèles) de HTML dans une variable et l'insérer par innerHTML .
backticks sont ici les facilitez-vous la tâche cette réponse est sur.
(vous voudrez également suivre le lien sur cette Q/A sur les backticks SO si vous lisez et testez cette réponse). .
exemple pour une barre de navigation qui reste la même sur chaque page :
<nav role="navigation">
<a href="http://stackoverflow.com/" class="here"><img src="image.png" alt="Home"/></a>
<a href="http://stackoverflow.com/about.html" >About</a>
<a href="http://stackoverflow.com/services.html" >Services</a>
<a href="http://stackoverflow.com/pricing.html" >Pricing</a>
<a href="http://stackoverflow.com/contact.html" >Contact Us</a>
</nav>Vous pouvez garder à l'intérieur de votre HTMl :
<nav role="navigation"></nav>et placé à l'intérieur nav.js le contenu du fichier <nav> comme une variable entre les points de suspension :
const nav= `
<a href="http://stackoverflow.com/" class="here"><img src="image.png" alt="Home"/></a>
<a href="http://stackoverflow.com/about.html" >About</a>
<a href="http://stackoverflow.com/services.html" >Services</a>
<a href="http://stackoverflow.com/pricing.html" >Pricing</a>
<a href="http://stackoverflow.com/contact.html" >Contact Us</a>
` ;Vous avez maintenant un petit fichier à partir duquel vous pouvez récupérer une variable contenant du HTML. Il ressemble beaucoup au fichier include.php et peut facilement être mis à jour sans le perturber. (ce qui est à l'intérieur des backticks) .
Vous pouvez maintenant lier ce fichier comme n'importe quel autre fichier javascript et innerHTML la variable nav à l'intérieur de <nav role="navigation"></nav> via
let barnav = document.querySelector('nav[role="navigation"]');
barnav.innerHTML = nav;Si vous ajoutez ou supprimez des pages, vous ne devez effectuer la mise à jour qu'une seule fois. nav.js
Une page HTML de base peut être :
// code standing inside nav.js for easy edit
const nav = `
<a href="http://stackoverflow.com/" class="here"><img src="image.png" alt="Home"/></a>
<a href="http://stackoverflow.com/about.html" >About</a>
<a href="http://stackoverflow.com/services.html" >Services</a>
<a href="http://stackoverflow.com/pricing.html" >Pricing</a>
<a href="http://stackoverflow.com/contact.html" >Contact Us</a>
`;
nav[role="navigation"] {
display: flex;
justify-content: space-around;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Home</title>
<!-- update title if not home page -->
<meta name="description" content=" HTML5 ">
<meta name="author" content="MasterOfMyComputer">
<script src="nav.js"></script>
<!-- load an html template through a variable -->
<link rel="stylesheet" href="css/styles.css?v=1.0">
</head>
<body>
<nav role="navigation">
<!-- it will be loaded here -->
</nav>
<h1>Home</h1>
<!-- update h1 if not home page -->
<script>
// this part can also be part of nav.js
window.addEventListener('DOMContentLoaded', () => {
let barnav = document.querySelector('nav[role="navigation"]');
barnav.innerHTML = nav;
});
</script>
</body>
</html>Cet exemple rapide fonctionne et peut être copié/collé puis modifié pour changer les noms des variables et leur contenu HTML.
Une autre approche rendue disponible depuis que cette question a été posée est d'utiliser reactrb-express (voir http://reactrb.org ) Cela vous permettra de script en ruby du côté client, en remplaçant votre code html par des composants react écrits en ruby.
Utiliser ajax
main.js
fetch("./includes/header.html")
.then(response => {
return response.text();
})
.then(data => {
document.querySelector("header").innerHTML = data;
});
fetch("./includes/footer.html")
.then(response => {
return response.text();
})
.then(data => {
document.querySelector("footer").innerHTML = data;
});index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Liks</title>
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<header></header>
<main></main>
<footer></footer>
<script src="/js/main.js"></script>
</body>
</html>
Crédits : W3 Schools Comment inclure le HTML
Enregistrez le HTML que vous voulez inclure dans un fichier .html :
Contenu.html
<a href="howto_google_maps.asp">Google Maps</a><br>
<a href="howto_css_animate_buttons.asp">Animated Buttons</a><br>
<a href="howto_css_modals.asp">Modal Boxes</a><br>
<a href="howto_js_animate.asp">Animations</a><br>
<a href="howto_js_progressbar.asp">Progress Bars</a><br>
<a href="howto_css_dropdown.asp">Hover Dropdowns</a><br>
<a href="howto_js_dropdown.asp">Click Dropdowns</a><br>
<a href="howto_css_table_responsive.asp">Responsive Tables</a><br>Inclure le HTML
L'inclusion du HTML se fait en utilisant un w3-include-html attribut :
Exemple
<div w3-include-html="content.html"></div>Ajoutez le JavaScript
Les inclusions HTML sont réalisées par JavaScript.
<script>
function includeHTML() {
var z, i, elmnt, file, xhttp;
/*loop through a collection of all HTML elements:*/
z = document.getElementsByTagName("*");
for (i = 0; i < z.length; i++) {
elmnt = z[i];
/*search for elements with a certain atrribute:*/
file = elmnt.getAttribute("w3-include-html");
if (file) {
/*make an HTTP request using the attribute value as the file name:*/
xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4) {
if (this.status == 200) {elmnt.innerHTML = this.responseText;}
if (this.status == 404) {elmnt.innerHTML = "Page not found.";}
/*remove the attribute, and call this function once more:*/
elmnt.removeAttribute("w3-include-html");
includeHTML();
}
}
xhttp.open("GET", file, true);
xhttp.send();
/*exit the function:*/
return;
}
}
}
</script>Appelez includeHTML() en bas de la page :
Exemple
<!DOCTYPE html>
<html>
<script>
function includeHTML() {
var z, i, elmnt, file, xhttp;
/*loop through a collection of all HTML elements:*/
z = document.getElementsByTagName("*");
for (i = 0; i < z.length; i++) {
elmnt = z[i];
/*search for elements with a certain atrribute:*/
file = elmnt.getAttribute("w3-include-html");
if (file) {
/*make an HTTP request using the attribute value as the file name:*/
xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4) {
if (this.status == 200) {elmnt.innerHTML = this.responseText;}
if (this.status == 404) {elmnt.innerHTML = "Page not found.";}
/*remove the attribute, and call this function once more:*/
elmnt.removeAttribute("w3-include-html");
includeHTML();
}
}
xhttp.open("GET", file, true);
xhttp.send();
/*exit the function:*/
return;
}
}
};
</script>
<body>
<div w3-include-html="h1.html"></div>
<div w3-include-html="content.html"></div>
<script>
includeHTML();
</script>
</body>
</html> 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.
