document.write ou innerHtml

[Langellier]

Pour éviter de répéter sur chaque page le menu ou plan du site, tout en évitant 1) les frames, 2) document.write (que j'utilisais jusqu'à présent), j'envisage d'utiliser innerHTML dans un fichier js externe bien sûr. Je me demande en quoi innerHTML est mieux. Voici la structure du script qui fonctionne :

Fichier html :
<h1>Sciences et paysage</h1>
<div id="myDIV"><script src="innerMenu.js"></script></div>

Fichier externe innerMenu.js :
document.getElementById("myDIV").innerHTML = '<p><a href="http://bernard.langellier.pagesperso-orange.fr/mengeologie.html">G&eacute;ologie</a> | <a href="http://bernard.langellier.pagesperso-orange.fr/menautre.html">Autres disciplines</a></p>';

Vous pouvez voir en réel le fonctionnement de innerHTML en consultant le code source du dernier lien ci-dessus (menu en bas de la page menautre).

Pensez-vous que c'est une bonne manière de faire ? Quels peuvent en être les défauts.
NB : Pour permettre le référencement tout en évitant la répétition, le menu apparaît dans le html de la page d'accueil uniquement.

 

[pouppinou]

Pourquoi vouloir éviter la répétition ?
N'y a t'il pas plus d'inconvénients que d'avantages ?

 

[Langellier]

Pourquoi vouloir éviter la répétition ?
N'y a t'il pas plus d'inconvénients que d'avantages ?

Pour la gestion du site, cela change tout : si je veux modifier le menu, avec un fichier externe, je fais la modification une seule fois, sinon autant de fois qu'il y a de pages.

 

[pouppinou]

Tu n'utilises pas de gabarits ?!
Avec quelle application crées-tu tes pages et gères-tu ton site ?

EDIT : Outch ! J'avais pas vu le "site" :eek:. Il est assez imbuvable et je ne parle même pas du code qui tient sur 15 lignes (gros bordel).
Honnêtement, si c'est pour garder cet aspect de "site" et uniquement pour conserver le menu du haut et du bas, utilises tout simplement le code suivant :

Pour le menu du haut
<?php include("menu-haut.php"); ?>

Pour le menu du bas
<?php include("menu-bas.php"); ?>

Tu places chaque ligne de code php là où tu veux insérer ton menu dans tes pages. Pages html où tu devras mettre l'extension .php et pas .html pour que cela fonctionne.​

Tu crées ton menu du haut sur la page menu-haut.php et ton menu du bas sur la page menu-bas.php
Basta cosi

 

[Langellier]

Tu n'utilises pas de gabarits ?!
Avec quelle application crées-tu tes pages et gères-tu ton site ?

EDIT : Outch ! J'avais pas vu le "site" :eek:. Il est assez imbuvable et je ne parle même pas du code qui tient sur 15 lignes (gros bordel).
Honnêtement, si c'est pour garder cet aspect de "site" et uniquement pour conserver le menu du haut et du bas, utilises tout simplement le code suivant :

Pour le menu du haut
<?php include("menu-haut.php"); ?>

Pour le menu du bas
<?php include("menu-bas.php"); ?>

Tu places chaque ligne de code php là où tu veux insérer ton menu dans tes pages. Pages html où tu devras mettre l'extension .php et pas .html pour que cela fonctionne.​

Tu crées ton menu du haut sur la page menu-haut.php et ton menu du bas sur la page menu-bas.php
Basta cosi

Merci pour ton aide sympathique. J'avais bien pensé au php. Sauf que chez Orange, à ma connaissance, le php ce n'est pas possible et aussi qu'il me faudrait renommer toutes les pages en .php.
Par ailleurs, j'admets que mon javascript externe est assez compliqué, mais il a l'avantage d'être fait une fois pour toute. J'admets aussi que la navigation n'est pas évidente. Cela s'explique en partie par la longévité du site, créé en 1997 et qui s'est transformé au fur et à mesure des standards du web. Cela s'explique aussi par la présence de pages alternatives (flash vs javascript). J'admets que j'ai un peu de ménage à faire pour simplifier la navigation. Je constate d'ailleurs que souvent la navigation paraît plus évidente pour celui qui l'a conçue, et qui donc en connait la structure, que pour l'internaute. Le menu du haut propose une recherche dans le site, il n'est donc pas toujours nécessaire de naviguer de page en page.
En parcourant les codes sources sur le web, je constate que nombre d'entre eux sont aussi, voire plus, bordéliques que les miens. J'évite d'utiliser les scripts tout faits, les bibliothèques jquery, souvent très lourdes. J'ai commis l'erreur de faire un blog avec blogspot qui ne me satisfait pas du tout et envisage de supprimer les liens qui y conduisent.
Pour créer mes pages j'utilise textWrangler. J'ai utilisé jadis claris Home Page, voire même simpleText (ça date), puis borakHtml. Je crée donc mes scripts de toute pièce avec mon clavier.
Si tu as fait un site, je veux bien le consulter pour prendre modèle et apprendre.

 

[USB09]

Pour vous aider dans le design de votre site, vous pouvez télécharger des icônes moderne à cette adresse. Il suffit de cocher puis valider là format PNG ou SVG, un Zip est créer.

https://icomoon.io/app/#/select

 

[byte_order]

Avec jQuery, dans chaque page :

<html>
<head>
<script src="https://code.jquery.com/jquery-latest.min.js"></script>
<script>$(function(){ $("#menuDiv").load("menu.html"); });</script>
</head>
<body>
<div id="menuDiv"></div>
<!-- contenu de la page -->
</body>
</html>

Avec dans menu.html :

<p>
<a href="[URL]http://bernard.langellier.pagesperso-orange.fr/mengeologie.html[/URL]">G&eacute;ologie</a> |
...
<a href="[URL]http://bernard.langellier.pagesperso-orange.fr/menautre.html[/URL]">Autres disciplines</a>
</p>

Si inclure jQuery vous semble trop lourd (euh... on est en 2018, quoi, hein, quasiment tous les sites modernes l'utilisent et les navigateurs l'encaissent sans broncher depuis longtemps), y'a un bout de code js qui fait *que* ça, mais très bien aussi :
https://www.w3schools.com/howto/howto_html_include.asp

Sinon, si vous n'avez pas de possibilité côté serveur d'hébergement (PHP, Node, etc), et que vous ne souhaitez pas migrer chez un hébergeur qui le propose (les tarifs commencent dès 2 euros par mois, avec un joli nom de domaine http://www.bernard-langellier.fr (actuellement dispo) bien plus joli, gratos la première année), il reste encore la solution de passer par des générateurs de sites statiques :
https://github.com/myles/awesome-static-generators