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.
Je travaille en C#/Razor et comme je n'ai pas de système IIS sur mon ordinateur portable, j'ai cherché une solution en javascript pour charger des vues tout en créant des balises statiques pour notre projet.
Je suis tombé sur un site web expliquant les méthodes pour "se débarrasser de jquery", il démontre une méthode sur le site qui fait exactement ce que vous cherchez en javascript simple ( lien de référence en bas de l'article ). Assurez-vous d'examiner les vulnérabilités de sécurité et les problèmes de compatibilité si vous avez l'intention de l'utiliser en production. Ce n'est pas mon cas, je n'ai donc pas cherché à le faire moi-même.
Fonction JS
var getURL = function (url, success, error) {
if (!window.XMLHttpRequest) return;
var request = new XMLHttpRequest();
request.onreadystatechange = function () {
if (request.readyState === 4) {
if (request.status !== 200) {
if (error && typeof error === 'function') {
error(request.responseText, request);
}
return;
}
if (success && typeof success === 'function') {
success(request.responseText, request);
}
}
};
request.open('GET', url);
request.send();
};Obtenir le contenu
getURL(
'/views/header.html',
function (data) {
var el = document.createElement(el);
el.innerHTML = data;
var fetch = el.querySelector('#new-header');
var embed = document.querySelector('#header');
if (!fetch || !embed) return;
embed.innerHTML = fetch.innerHTML;
}
);index.html
<!-- This element will be replaced with #new-header -->
<div id="header"></div>vues/en-tête.html
<!-- This element will replace #header -->
<header id="new-header"></header>La source n'est pas la mienne, je ne fais que la référencer car il s'agit d'une bonne solution javascript vanille pour l'OP. Le code original se trouve ici : http://gomakethings.com/ditching-jquery#get-html-from-another-page
Je pense que les réponses à cette question sont trop anciennes... Actuellement, certains navigateurs de bureau et mobiles prennent en charge les éléments suivants Modèles HTML pour avoir fait ça.
J'ai construit un petit exemple :
Testé OK dans Chrome 61.0, Opera 48.0, Opera Neon 1.0, Android Browser 6.0, Chrome Mobile 61.0 et Adblocker Browser 54.0
Testé KO dans Safari 10.1, Firefox 56.0, Edge 38.14 et IE 11
Plus d'informations sur la compatibilité dans canisue.com
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML Template Example</title>
<link rel="stylesheet" href="styles.css">
<link rel="import" href="autoload-template.html">
</head>
<body>
<div class="template-container">1</div>
<div class="template-container">2</div>
<div class="template-container">3</div>
<div class="template-container">4</div>
<div class="template-container">5</div>
</body>
</html>autoload-template.html
<span id="template-content">
Template Hello World!
</span>
<script>
var me = document.currentScript.ownerDocument;
var post = me.querySelector( '#template-content' );
var container = document.querySelectorAll( '.template-container' );
//alert( container.length );
for(i=0; i<container.length ; i++) {
container[i].appendChild( post.cloneNode( true ) );
}
</script>styles.css
#template-content {
color: red;
}
.template-container {
background-color: yellow;
color: blue;
}Vous pouvez obtenir plus d'exemples dans ce Le billet HTML5 Rocks
Aloha de 2018. Malheureusement, je n'ai rien de cool ou de futuriste à partager avec vous.
Je voulais cependant signaler à ceux qui ont fait des commentaires que le système jQuery load() ne fonctionne pas dans le présent, vous essayez probablement d'utiliser la méthode avec des fichiers locaux sans exécuter un serveur web local. Si vous le faites, vous obtiendrez l'erreur "cross origin" mentionnée ci-dessus, qui spécifie que les requêtes "cross origin" telles que celles effectuées par la méthode load ne sont prises en charge que pour des protocoles tels que http , data ou https . (Je suppose que vous n'effectuez pas une demande d'origine croisée, c'est-à-dire que le fichier header.html se trouve sur le même domaine que la page à partir de laquelle vous le demandez).
Donc, si la réponse acceptée ci-dessus ne fonctionne pas pour vous, assurez-vous que vous exécutez un serveur web. La façon la plus rapide et la plus simple de le faire si vous êtes pressé (et si vous utilisez un Mac, qui a Python préinstallé) serait de lancer un simple serveur http Python. Vous pouvez voir comme il est facile de le faire aquí .
J'espère que cela vous aidera !
La question porte sur l'utilisation uniquement HTML et JavaScript . Le problème est qu'une deuxième demande au serveur par votre JavaScript (demandant le fichier header.html "plus tard") est :
Lentement !
C'est donc inacceptable dans un environnement de production. La solution est d'importer un seul .js et servir votre modèle HTML en utilisant uniquement ce fichier .js . Ainsi, dans votre HTML, vous pouvez avoir :
<script defer src="header.js"></script>
<header id="app-header"></header>Et ensuite, dans votre header.js mettez votre modèle. Utilisez des backticks pour cette chaîne HTML :
let appHeader = `
<nav>
/*navigation or other html content here*/
</nav>
`;
document.getElementById("app-header").innerHTML = appHeader;Cela présente également l'avantage de pouvoir modifier le contenu de votre modèle. dynamiquement si vous en avez besoin ! (Si vous voulez que votre code soit propre, je vous recommande de ne pas inclure d'autre code dans ce code. header.js fichier.)
Explication sur la vitesse
Dans le monde HTTP/2, le serveur web "comprend" quels fichiers supplémentaires (.css, .js, etc.) doivent être envoyés avec une requête spécifique. .html et les envoie tous ensemble dans la réponse initiale. Mais, si dans votre "original" .html vous n'avez pas cette header.html importé (parce que vous avez l'intention de l'appeler plus tard avec un script), il ne sera pas envoyé initialement. Ainsi, lorsque votre JavaScript/jQuery le demandera (cela se produira beaucoup plus tard, lorsque le HTML et votre JavaScript seront "interprétés"), votre navigateur enverra une deuxième demande au serveur, attendra la réponse, puis fera son travail... C'est pourquoi c'est lent. Vous pouvez valider cela, en utilisant les outils de développement de n'importe quel navigateur, en observant la fonction header.html à venir bien plus tard.
Donc, en règle générale (il y a beaucoup d'exceptions bien sûr), importez tous vos fichiers supplémentaires dans votre fichier d'origine. .html (ou php ) si vous vous souciez de la vitesse. Utilisez defer si nécessaire. N'importez pas de fichiers plus tard en utilisant JavaScript.
Il est également possible de charger des scripts et des liens dans l'en-tête. Je vais l'ajouter dans l'un des exemples ci-dessus...
<!--load_essentials.js-->
document.write('<link rel="stylesheet" type="text/css" href="css/style.css" />');
document.write('<link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />');
document.write('<script src="js/jquery.js" type="text/javascript"></script>');
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> 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.
