Appel bout de code html dans une autre page

Fermé
gmartine - 9 nov. 2010 à 10:19
 seb - 18 déc. 2011 à 00:27
Bonjour,

j'ai une page html index.html (par exemple)

Je voulais savoir si il était possible d'afficher une seule partie de cette page(un morceau de code tel ligne à tel ligne) dans une autre page.

Sachant que la page index.html sera régulièrement mis à jour. et l'autre page reprendra une seule partie de cette mise à jour.

Merci


3 réponses

Reivax962 Messages postés 3671 Date d'inscription jeudi 16 juin 2005 Statut Membre Dernière intervention 11 février 2021 1 011
9 nov. 2010 à 11:41
Bonjour,

Idéalement, pour faire ce que tu veux il faudrait utiliser une gestion de contenu, même sommaire, ce qui implique passer à une technologie plus poussée que le simple HTML (php, asp.net, etc.).

Ceci dit, il reste des possibilités.
Dans TOUS les cas, par contre, le bout de code mobile ne doit pas être écrit dans index.html, qui serait partiellement copiée dans une autre page.
Ce bout de code mobile doit être tout seul dans un fichier, et sera inclus en intégralité d'une part dans index.html, d'autre part dans ton autre page. Ces deux pages fonctionneront donc de la même façon.

Je vois deux façons de faire.

En javascript
- Tu places le bout de code mobile dans une page quelconque. Disons, contenu.html.
- Dans tes pages web (index.html et l'autre), tu réserves la place qu'il faut pour afficher ce bout de code, par exemple en plaçant un élément <div>. Tu lui donnes un id bien défini, par exemple <div id="contenuMobile"></div>
- Tu crées un nouveau fichier, contenu_mobile.js.
- Dans ce fichier, tu places le code suivant (c'est en fait un appel Ajax)
function afficherContenuMobile()
{
    var url = "contenu.html";    
    var request = new XMLHttpRequest();
    request.onreadystatechange = afficher;
    request.open("GET", url);
    request.setRequestHeader("Content-Type", "text/plain;charset=UTF-8");
    request.send(null);
    
    function afficher()
    {
        if(request.readyState == 4)
        {
            var emplacement = document.getElementById("contenuMobile");
            var texte = request.responseText;
            
            emplacement.innerHTML = texte;
        }
    }
}

- Dans tes deux pages web (index.html et l'autre), dans la balise <head>, tu références ce nouveau fichier javascript :
<script type="text/javascript" src="contenu_mobile.js"></script>
- Dans ces deux mêmes fichiers, dans la balise <body>, tu appelles la fonction javascript comme ceci :
<body onload="afficherContenuMobile();"</body>

L'autre méthode est moins propre mais plus simple.

Avec des iframe
- Tu places le bout de code mobile dans une page quelconque. Disons, contenu.html.
- Dans tes pages web (index.html et l'autre), à l'endroit où tu souhaites voir apparaître ce bout de code, tu places une iframe :
<iframe src="contenu.html" width="??" height="??" scrolling="auto" frameborder="0"></iframe>
Tu dois réserver la place nécessaire dans les attributs height et width.

En espérant que ça puisse t'aider,

Xavier
1