11495 sujets

JavaScript, DOM et API Web HTML5

Charger une page HTML local dans une div sans jQuery

Bonjour,
Je cherche un moyen de charger une page HTML local dans une div.
Je n'ai pas accès à un serveur local et je ne souhaite pas utiliser jQuery.
Voici le code de ma page index.html :
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title></title>
</head>
<body>
	<button class="btn-table" onclick=''>Clicker ici pour charger le fichier</button>
	<div id="content"></div>
</body>
</html>

le code de ma page content.html que je veux charger :
<div class="hello">
	<h1>Hello world !</h1>
</div>

J'aimerai charger le code de content.html dans ma div#content.
Aucune des solutions que j'ai trouvé n'a fonctionné.
Merci d'avance.
Modérateur
Bonjour,

Une solution pour mimer les includes ou AJAX dans un document HTML sur un ordinateur en local (avec ou sans serveur) , c'est de stocker tes page HTML comme des variables Javascript entre des caractères accent grave au lieu de classiques apostrophe. Explications/raisons : voir https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Template_literals .

Tu peux alors renommé ton fichier content.html en content.js puis l'éditer en passant son contenu dans une variable:
let content=`<div class="hello">
	<h1>Hello world !</h1>
</div>`;


Pour cela, il te faut capté le click sur le lien puis évaluer et insérer la variable correspondante (stocké dans href) dans le conteneur adéquat. Voici un exemple fonctionnel https://codepen.io/gc-nomade/pen/JjRGwrv et un zip pour le tester en local avec les fichiers externe a la page index. https://re7net.com/data/medias/zip/js-fake-include.zip .

Attention, tel quel, il n'y aura pas d'historique de navigation, tout est affiché depuis index.html
Oui, d'accord, mais vu que je suis un débutant, je ne sais pas du tout faire le code pour mettre la variable dans la div avec un button
Modifié par BurgerKingKong (09 Nov 2022 - 16:07)
Modérateur
Salut,

Je vais ptetre dire une bétise mais avec une <iframe scr="content.html"> ?

BurgerKingKong a écrit :
Oui, d'accord, mais vu que je suis un débutant, je ne sais pas du tout faire le code pour mettre la variable dans la div avec un button

Là il te faut un cours de Js pas un forum Smiley lol
Modérateur
_laurent a écrit :
Salut,

Je vais ptetre dire une bétise mais avec une &lt;iframe scr="content.html"&gt; ?


Là il te faut un cours de Js pas un forum Smiley lol


avec l'iframe ça marche aussi, mais faut aussi mettre à jour le src , sinon pour la bétises, y'avait frameset, long ago brrrr Smiley smile
Prévenir un modérateur
Répondre au sujet
Aller à