Inclure un fichier HTML dans un autre fichier HTML
-
Utilisez la méthode jQuery
load()pour inclure un fichier HTML dans un fichier HTML - Utiliser JavaScript pour inclure un fichier HTML dans un fichier HTML
Cet article présentera des méthodes pour inclure un fichier HTML dans un fichier HTML.
Utilisez la méthode jQuery load() pour inclure un fichier HTML dans un fichier HTML
La méthode jQuery load() permet de charger les données depuis le serveur. Les données seront affichées dans le conteneur sélectionné. Nous pouvons utiliser la méthode load() pour inclure un autre fichier HTML dans le fichier HTML courant. La syntaxe de la méthode load() est la suivante.
.load(url, data, callback);
La méthode load() prend l’URL à charger comme premier paramètre. Il possède deux autres paramètres, data et callback fonction, qui sont facultatifs. Le paramètre data correspond aux données à envoyer au serveur lors du traitement de la requête. callback fonction s’exécutera si la méthode load() se termine.
Pour exécuter jQuery, nous devons utiliser le CDN jQuery dans la balise script en HTML. Par exemple, allez sur CDN et choisissez l’option minifiée sur la dernière version de jQuery. Ensuite, copiez le code et collez-le dans le fichier index.html. Ensuite, créez un div avec l’identifiant anotherContent en HTML. Ensuite, créez une balise p et écrivez le texte This is from index.html. Créez un autre fichier HTML nommé lac.html et écrivez un paragraphe This is from lake.html. Dans index.html, écrivez une fonction jQuery. Sélectionnez l’identifiant anotherContent et appelez la méthode load() avec lake.html comme paramètre.
Lorsque nous exécutons le fichier index.html, nous pouvons également voir le texte This is from lake.html. Cependant, il faut lancer le fichier index.html depuis un serveur HTTP. Cross-Origin Request sera bloqué lorsque nous inclurons un autre fichier (lac.html dans notre cas) dans le fichier en cours en utilisant le serveur file local. Pour éliminer ce problème, nous pouvons créer un serveur HTTP avec la commande python suivante depuis le répertoire du fichier index.html.
python3 -m SimpleHTTPServer 1337
Ensuite, nous pouvons accéder à notre page Web à partir de http://localhost:1337. Ainsi, nous pouvons utiliser jQuery pour inclure un autre fichier HTML dans le fichier HTML actuel.
Exemple de code :
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous">
</script>
<script>
$(function(){
$("#anotherContent").load("lake.html");
});
</script>
<div id="anotherContent"></div>
<p>This is from index.html</p>
<p> This is from lake.html</p>
Production :
This is from lake.html
This is from index.html
Utiliser JavaScript pour inclure un fichier HTML dans un fichier HTML
Nous pouvons utiliser JavaScript pour inclure du HTML dans un fichier HTML. L’avantage d’utiliser cette méthode à l’aide de jQuery est que nous n’avons à charger aucun des fichiers jQuery qui réduisent la taille de notre fichier. Nous pouvons utiliser les littéraux de modèle en JavaScript pour écrire le code HTML. Nous pouvons atteindre notre objectif en incluant le fichier JavaScript dans notre fichier HTML et en écrivant le code HTML dans le fichier JavaScript.
Par exemple, dans le fichier index.hmtl, lier le fichier lake.js à l’aide de l’attribut src dans la balise script. Dans la section corps, écrivez le texte This is from index.html. Dans le fichier lake.js, utilisez document.write() pour écrire le HTML. Utilisez les littéraux du modèle pour écrire le code HTML à l’intérieur de la méthode. En d’autres termes, enveloppez le contenu HTML avec les backticks. Écrivez la balise p à l’intérieur de la méthode et écrivez le texte This is HTML from lake.js.
Dans la section de sortie, nous pouvons voir les textes des deux fichiers. Ainsi, nous pouvons inclure du HTML dans un fichier HTML en utilisant JavaScript.
Exemple de code :
<head>
<script src="lake.js "></script>
</head>
<body>
<p>This is from index.html</p>
</body>
document.write(`
<p>This is HTML from lake.js</p>
`);
Production :
This is HTML from lake.js
This is from index.html
Subodh is a proactive software engineer, specialized in fintech industry and a writer who loves to express his software development learnings and set of skills through blogs and articles.
LinkedIn