logo-linux-challans

Include en Javascript

Codes et scripts
  • papinouP

    Bonsoir à tous.

    Peut-on inclure un menu dans ses pages html sans utiliser la fonction include du php ?

    le fichier "nav.js" :

    var navigation = "<nav>";
navigation +=   "<ul>";
navigation +=   "<li>Menu</li>";
navigation +=   "<li><a href=https://forum.linuxchallans.org>Forum Linux Challans</a></li>";
navigation +=   "<li>à propos</li>";
navigation +=   "<li>nous écrire</li>";
navigation +=   "</ul>";
navigation +=   "</nav>";
document.getElementById("navigation").innerHTML = navigation;

    et les pages :

    <html>
<div id="navigation"></div>
<script src="nav.js"></script>
<!--le texte ici-->
<body>
Votre texte apparaît ici.
</body>
</html>

    Y aurait-il un problème de sécurité (comme autrefois avec les frameset et plus récemment les iframes) ?

    MenfiM 2 réponses
    0
  • MenfiM

    @papinou a dit dans Include en Javascript :

    Peut-on inclure un menu dans ses pages html sans utiliser la fonction include du php ?

    Le PHP n'est pas obligatoire pour réaliser une barre de navigation.

    Y aurait-il un problème de sécurité (comme autrefois avec les frameset et plus récemment les iframes) ?

    L'aspect sécurité de l'iframe est abordé à l'adresse https://developer.mozilla.org/fr/docs/Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies#problèmes_de_sécurité. Je ne pense pas que les lignes javascript de ton code entraînent des problèmes de sécurité similaires à ceux énoncés dans l'article.

    Le code précédent fonctionne bien. Quel est l'intérêt d'écrire ton menu comme cela ?

    0
  • papinouP

    @olivier a dit dans Include en Javascript :

    Le code précédent fonctionne bien. Quel est l'intérêt d'écrire ton menu comme cela ?

    Merci Olivier,
    C'est l'intérêt de ne pas avoir à réécrire le menu dans chaque page html comme on peut le faire avec la fonction php "include" et un serveur.
    J'avais à faire une présentation en public et j'ai utilisé ce moyen qui s'est avéré très pratique pour la navigation lors de la projection.
    Il existe certainement d'autres astuces mais je voulais pouvoir donner aux participants à cette présentation le moyen de la revoir sur leurs ordinateurs sans avoir à installer un serveur en local.

    1
  • MenfiM

    @papinou a dit dans Include en Javascript :

    Peut-on inclure un menu dans ses pages html sans utiliser la fonction include du php ?

    Oui. Avec des outils comme par exemple Harp. Harp permet de produire rapidement des sites Web.

    harpjs.png

    L'exemple donné sur leur page d'accueil correspond exactement à ton exemple de menu.

    0
  • papinouP
    • Un menu astucieux, en html/css, pointant sur différentes pages , à adapter à votre convenance :
    <html>
		<!-- on crée le menu -->
	<p>
  		<a href="#Page 1">Page 1</a>
  		<a href="#Page 2">Page 2</a>
  		<a href="#Page 3">Page 3</a>	
  		<a href="#zero">Remise à zéro</a>
	</p>
		<!-- on crée les pages -->
	<div class="Pages">
  		<p id="Page 1">Bravo ! vous êtes à la page numéro 1
  		<p id="Page 2">Encore Bravo ! Vous êtes à la page numéro 2
  		<p id="Page 3">Super ! encore une fois Bravo, vous êtes à la page numéro 3
  		<p id="zero"><!-- pas d'affichage de texte -->
	</div>
		<!-- on affiche ou non la page -->
	<style>
		div.Pages p:not(:target) {display: none}
		div.Pages p:target {display: block}	
	</style>	
</html>
    • Pour en savoir plus sur ce menu :

    https://www.w3.org/Style/Examples/007/target.fr.html#item1

    0
  • MenfiM

    @papinou Même si cet exemple s'apparente à la création d'un menu ce n'est pas l'idée que je m'en fais. Les liens pointent sur des paragraphes et non des pages. On retrouve quelque chose de similaire (display: none) à l'adresse https://developer.mozilla.org/fr/docs/Web/CSS/:target.

    0
  • papinouP

    @olivier a dit dans Include en Javascript :

    @papinou Les liens pointent sur des paragraphes et non des pages.

    L'idée est de pointer sur des éléments d'autres pages html , extérieures à la page html d'index, mais je ne sais pas si les pseudo-classes permettent ce genre de manip.

    1
  • MenfiM

    Le sélecteur :target permet de mettre en forme l'élément ciblé par l'identifiant mentionné dans l'URL du document. Si on reprend l'exemple précédent avec le display: none qu'est-ce que cela donnerait avec des pages distinctes ? On n'affiche pas les pages sur lesquelles on n'est pas ... 🤔

    1

Sujets suggérés