Comment insérer du code HTML dans une page HTML (page Web) ?

Curieusement, on peut insérer dans une page Web écrite en HTML, du CSS, du Javascript, des images, des vidéos, du sons, mais pas facilement du code HTML !
Il y a la possibilité d'utiliser la balise <iframe>, mais le résultat n'est pas celui espéré dans bien des cas.
On peut également utiliser du PHP, mais cela a des défauts, par exemple lors de tests en local.
La manière que je préfère est l'utilisation de Ajax avec du javascript.
Une manière de faire est décrite en anglais dans le lien suivant :
"How TO - Include HTML" de la w3Schools, en anglais.
J'ai trouvé également ceci, trop superficiel pour moi : The Simplest Ways to Handle HTML Includes

Ici, je vais montrer une manière très similaire, avec un code que j'ai écrit.
Le code est utilisé dans cette page Web, juste pour montrer que cela marche.
Affichez le code source de cette page pour voir le fonctionnement.
1) J'ai mis le code javascript dans cette page, dans le <head>
    Normalement il est mis dans un fichier .js qui serait inclus avec : <script type="text/javascript" src="nom.js"></script>.
2) J'utilise le fichier a1html1050_menu.html pour le code HTML du menu
3) J'utilise le fichier a1html1050_pied_page.html pour le code HTML du pied de page

Parfois, pendant les tests en local, il y a des problèmes de "Same origin policy".
J'en parle dans cette page Web et j'indique comment contourner ce problème.

Le code source javascript est donné plus bas.
Ici vient l'essentiel de la page Web.
Le menu (ci-dessus, bidon) a été inclus à l'aide d'une balise <div> et d'un script. C.f. le code source de cette page.
J'ai ajouté la possibilité de griser l'entrée du menu correspondant à la page dans laquelle on se trouve.
Le menu est incomplet, car je ne montre qu'une page Web, pas tout un site.
Voici deux exemples d'amis :
° Filibert, Clown sans nez rouge.
° Feng Shui traditionnel.
Le pied de page est inclus à l'aide d'une balise <div> et du même script, qui peut être utiliser autant de fois que désiré.

Voici le code javascript, disponible également dans le code source de cette page :
function Modifie_lien(strIDaGrise) {
//==================================
// Modifie le lien se trouvant dans le fichier inclus et le met en grisé.
var oSpan = document.getElementById(strIDaGrise);

// c.f. https://www.w3schools.com/jsref/dom_obj_all.asp  pour les champs de : oSpan ou oDiv
oSpan.innerHTML = oSpan.children[0].innerHTML;
oSpan.style.color = "rgb(150,150,150)"; // Grise le contenu de la balise strIDaGrise.
} // Modifie_lien

function Include_Code(idDiv, strFile, strIDaGrise) {
//==================================================
// Inclus le fichier demandé

// Utilisation de AJAX pour obtenir les textes dans la langue désirée.
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
  //===================================
  if (xhttp.readyState === 4) { // && xhttp.status == 200) {
    // Le document a été chargé, on peut modifier le contenu de la balise <div id="idLang">
    document.getElementById(idDiv).innerHTML = xhttp.responseText;       

    // Changement du texte dès que le code est chargé.
    if (strIDaGrise != "") Modifie_lien(strIDaGrise);
    }
  };

// La méthode GET est généralement préférable, mais limite la taille du fichier à 8 ko, parfois 2 ko.
// La limite provient du fait que les données sont transmises via l'URL.
xhttp.open("GET", strFile, true); // true indique que l'appel est asynchrone.
//xhttp.open("POST", strLang, true); // true indique que l'appel est asynchrone.
xhttp.send();  
} // Include_Code

function Include_using_write() {
//==============================
document.write("\
<br>\
<b>Une manière de faire</b> est montré dans ce \
texte, qui a été ajouté en utilisant la fonction : document.write('...');<br>\
Regardez la fonction 'Include_using_write()' dans le code source de cette page.<br>\
Ceci n'est qu'un exemple, la manière normale serait d'inclure un fichier javascript \n\
à l'endroit désiré, pour inclure le code HTML avec la fonction document.write('...');<br>\n\
Un exemple d'une telle utilisation se trouve dans : \
<a href='https://aei.unige.ch/' target='_blank'>aei.unige.ch</a><br>\
<br>\
");

Plan du Site : Home   arrow   bgweb.html   arrow   exemples.html   arrow   a1html1050_html.html ( = http://www.juggling.ch/gisin/bgweb/a1html1050_html.html )

Page mise à jour le 29 novembre 2020 par Bernard Gisin     ( Envoyer un e-mail )
Hébergement par : www.infomaniak.ch