Appeler un fichier HTML depuis un JS lui-même appelé dans une page HTML

Version imprimable

2 pièce(s) jointe(s)

Bonjour à tous et à toutes,

Je suis sur une page HTML qui, dans un de ses blocs, appelle un script JS qui permet d'afficher les horaires de 3 médiathèques en fonction du jour de la semaine.
Voici le code dans la page HTML :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
<div id="horaires">
    <h2 class="block-title-horaires">Horaires</h2>
    <div class="liste-horaires">
 
        <script language="JavaScript">
            document.write(horairesouverture());
        </script>
 
        <a href="https://mon-site-inter.net/horaires" class="en-savoir-plus-horaires en_savoir_plus">En savoir plus</a>
 
    </div>
</div>

Voici ce que contient le fichier horaires_ouverture.js appelé dans la page HTML :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
function horairesouverture() {
    var day = new Date().getDay();
 
    //Lundi
    if(day==1){
        return'<div class="col-md-12"\><h3 class="nom_mediatheque mitterrand"\>Médiathèque François Mitterrand</h3\><div class="ouverte"\>Ouverte</div\><div class="horaires_ouverture"\>De 13h à 19h</div\></div\><div class="col-md-12"\><h3 class="nom_mediatheque"\>Médiathèque Victor Hugo</h3\><div class="fermee"\>Fermée</div\></div\><div class="col-md-12"\><h3 class="nom_mediatheque"\>Médiathèque Alphonse Daudet</h3\><div class="fermee"\>Fermée</div\></div\>' ;
    }
 
    //Mardi
	else if (day==2){
        return'<div class="col-md-12"\><h3 class="nom_mediatheque mitterrand"\>Médiathèque François Mitterrand</h3\><div class="ouverte"\>Ouverte</div\><div class="horaires_ouverture"\>De 10h à 19h</div\></div\><div class="col-md-12"\><h3 class="nom_mediatheque"\>Médiathèque Victor Hugo</h3\><div class="ouverte"\>Ouverte</div\><div class="horaires_ouverture"\>De 14h à 18h</div\></div\><div class="col-md-12"\><h3 class="nom_mediatheque"\>Médiathèque Alphonse Daudet</h3\><div class="ouverte"\>Ouverte</div\><div class="horaires_ouverture"\>De 14h à 18h</div\></div\>' ;
    }
 
    //Mercredi
	else if (day==3){
        return'<div class="col-md-12"\><h3 class="nom_mediatheque mitterrand"\>Médiathèque François Mitterrand</h3\><div class="ouverte"\>Ouverte</div\><div class="horaires_ouverture"\>De 10h à 19h</div\></div\><div class="col-md-12"\><h3 class="nom_mediatheque"\>Médiathèque Victor Hugo</h3\><div class="ouverte"\>Ouverte</div\><div class="horaires_ouverture"\>De 10h à 12h30 et de 14h à 18h</div\></div\><div class="col-md-12"\><h3 class="nom_mediatheque"\>Médiathèque Alphonse Daudet</h3\><div class="ouverte"\>Ouverte</div\><div class="horaires_ouverture"\>De 10h à 12h30 et de 14h à 18h</div\></div\>' ;
    }
 
	//Jeudi
	else if (day==4){
        return'<div class="col-md-12"\><h3 class="nom_mediatheque mitterrand"\>Médiathèque François Mitterrand</h3\><div class="fermee"\>Fermée</div\></div\><div class="col-md-12"\><h3 class="nom_mediatheque"\>Médiathèque Victor Hugo</h3\><div class="ouverte"\>Ouverte</div\><div class="horaires_ouverture"\>De 14h à 18h</div\></div\><div class="col-md-12"\><h3 class="nom_mediatheque"\>Médiathèque Alphonse Daudet</h3\><div class="ouverte"\>Ouverte</div\><div class="horaires_ouverture"\>De 14h à 18h</div\></div\>' ;
    }
 
    //Vendredi
	else if (day==5){
        return'<div class="col-md-12"\><h3 class="nom_mediatheque mitterrand"\>Médiathèque François Mitterrand</h3\><div class="ouverte"\>Ouverte</div\><div class="horaires_ouverture"\>De 10h à 19h</div\></div\><div class="col-md-12"\><h3 class="nom_mediatheque"\>Médiathèque Victor Hugo</h3\><div class="ouverte"\>Ouverte</div\><div class="horaires_ouverture"\>De 14h à 18h</div\></div\><div class="col-md-12"\><h3 class="nom_mediatheque"\>Médiathèque Alphonse Daudet</h3\><div class="ouverte"\>Ouverte</div\><div class="horaires_ouverture"\>De 14h à 18h</div\></div\>' ;
    }
 
    //Samedi
	else if (day==6){
        return'<div class="col-md-12"\><h3 class="nom_mediatheque mitterrand"\>Médiathèque François Mitterrand</h3\><div class="ouverte"\>Ouverte</div\><div class="horaires_ouverture"\>De 10h à 18h</div\></div\><div class="col-md-12"\><h3 class="nom_mediatheque"\>Médiathèque Victor Hugo</h3\><div class="ouverte"\>Ouverte</div\><div class="horaires_ouverture"\>De 10h à 12h30 et de 14h à 18h</div\></div\><div class="col-md-12"\><h3 class="nom_mediatheque"\>Médiathèque Alphonse Daudet</h3\><div class="ouverte"\>Ouverte</div\><div class="horaires_ouverture"\>De 10h à 12h30 et de 14h à 18h</div\></div\>' ;
    }
 
    //Dimanche
	else{
        return'<div class="col-md-12"\><h3 class="nom_mediatheque mitterrand"\>Médiathèque François Mitterrand</h3\><div class="fermee"\>Fermée</div\></div\><div class="col-md-12"\><h3 class="nom_mediatheque"\>Médiathèque Victor Hugo</h3\><div class="fermee"\>Fermée</div\></div\><div class="col-md-12"\><h3 class="nom_mediatheque"\>Médiathèque Alphonse Daudet</h3\><div class="fermee"\>Fermée</div\></div\>';
    }
}

Comme vous pouvez le voir, il y a pas mal de code HTML dans ce fichier JS.
Régulièrement (à chaque vacances à vrai dire), le client demande à ce qu'on change les horaires. Etant donné que c'est moi qui ai mis en place ce fichier JS (qui plus est dans un dossier dont le client n'a pas accès), c'est moi qui le modifie à chaque fois.

A moyen-long terme, je pense changer de boite. Résultat, ce sera mon/ma remplaçant(e) ou un(e) de mes collègues qui se chargera de les changer.

Pour faciliter la tache de cette/ces personne(s), je voudrais créer un fichier HTML (plus facile à modifier qu'un fichier JS) PAR jour de la semaine (soit 7 fichiers) et appeler le fichier HTML correspondant dans le fichier JS.
En gros, le lundi, le fichier JS appelle le fichier lundi.html, le mardi, le fichier JS appelle le fichier mardi.html, ...

Comme on est dimanche, j'ai créé un fichier dimanche.html avec le code HTML de dimanche (logique).
Ensuite, via une ligne de script JS que j'ai trouvée sur Internet et mis à ma sauce, j'appelle ce fichier HTML :

Code:

document.querySelector('#horaires .liste-horaires').innerHTML='<object type="text/html" data="https://mon-site-inter.net/horaires/dimanche.html" ></object>';

Cependant, il y a plusieurs problèmes :
Voici le code HTML qui en résulte :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<div class="bloc-horaires">
    <object type="text/html"
        data="https://mediatheque.lorient.bzh/data/mediatheque.lorient.bzh/application/layout/public/pageperso/dimanche.html">
        #document
        <html>
 
            <head></head>
 
            <body>
                <div class="col-md-12">
                    <h3 class="nom_mediatheque mitterrand">Médiathèque François Mitterrand</h3>
                    <div class="fermee">Fermée</div>
                </div>
                <div class="col-md-12">
                    <h3 class="nom_mediatheque">Médiathèque Victor Hugo</h3>
                    <div class="fermee">Fermée</div>
                </div>
                <div class="col-md-12">
                    <h3 class="nom_mediatheque">Médiathèque Alphonse Daudet</h3>
                    <div class="fermee">Fermée</div>
                </div>
            </body>
 
        </html>
    </object>
</div>

Avec le résultat visuel suivant :
Pièce jointe 643399
Au lieu de celui-ci :
Pièce jointe 643401

Comme vous pouvez le voir, le script JS appelle un objet qui contient un document HTML avec (logiquement) un head (vide) et un body. C'est un peu comme une iFrame ce qui fait sauter le style CSS.

Y-a-t-il une autre méthode pour :
- appeler un fichier HTML facilement modifiable par quelqu'un ayant pas/peu de connaissance en programmation web
- avoir le même rendu que sur la dernière capture d'écran ?

Je vous remercie par avance pour vos réponses

Bonne journée ;)

Bonjour,
tout d'abord excuse moi pour cette remarque, mais je ne pensais pas qu'un tel code puisse encore exister et être livré :aie:

Ceci étant il me semble, parmi les nombreuses approches que l'on pourrait avoir, que le passage par un objet serait plus aisément maintenable.

Les datas pourraient ressembler à :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
// pour la lisibilité et accès à la liste
const daysName = "Dimanche,Lundi,Mardi,Mercredi,Jeudi,Vendredi,Samedi". split(",");
// si pas de valeur on considère que c'est fermé
const daysTime = {
  "Lundi": {
    "François Mitterrand": "De 13h à 19h",
    "Victor Hugo": "",
    "Alphonse Daudet": "",
  },
  "Mardi": {
    "François Mitterrand": "De 10h à 19h",
    "Victor Hugo": "De 14h à 18h",
    "Alphonse Daudet": "De 14h à 18h",
  },
  "Mercredi": {
    "François Mitterrand": "De 10h à 19h",
    "Victor Hugo": "De 10h à 12h30 et de 14h à 18h",
    "Alphonse Daudet": "De 10h à 12h30 et de 14h à 18h",
  },
  "Jeudi": {
    "François Mitterrand": "",
    "Victor Hugo": "De 14h à 18h",
    "Alphonse Daudet": "De 14h à 18h",
  },
  "Vendredi": {
    "François Mitterrand": "De 10h à 19h",
    "Victor Hugo": "De 14h à 18h",
    "Alphonse Daudet": "De 14h à 18h",
  },
  "Samedi": {
    "François Mitterrand": "De 10h à 18h",
    "Victor Hugo": "De 10h à 12h30 et de 14h à 18h",
    "Alphonse Daudet": "De 10h à 12h30 et de 14h à 18h",
  },
  "Dimanche": {
    "François Mitterrand": "",
    "Victor Hugo": "",
    "Alphonse Daudet": "",
  },
};

... concernant la création du HTML à insérer on pourrait utiliser :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
function getTemplate(data) {
  const html = [];
  for (const [key, value] of Object.entries(data)) {
    const className = value ? "ouverte" : "fermee";
    html.push(`
       <div class="col-md-12">
         <h3 class="nom_mediatheque">Médiathèque ${key}</h3>
         <div class="${className}"\></div>
         <div class="horaires_ouverture">${value}</div>
       <\/div>`);
  }
  return html.join("");
}

... enfin le lancement se ferait ainsi :

Code:

1
2
3
4
5
6
7
8
9
document.addEventListener("DOMContentLoaded", function() {
  const day = new Date().getDay();
  const elemDest = document.getElementById("horaires");
  // test minimum
  if(elemDest) {
    const html = getTemplate(daysTime[daysName[day]]);
    elemDest.insertAdjacentHTML("afterbegin", html);
  }
});

Tout cela peut être regroupé dans un fichier JS, par exemple show-horaires.js.

Pour que cela soit opérationnel il te suffit d'insérer dans ton fichier HTML :

au minimum la structure suivante, ce qui est visiblement déjà le cas :

Code:

1
2
3
4
5
6
<div>
  <h2 class="block-title-horaires">Horaires</h2>
  <div id="horaires" class="bloc-horaires">
    <a href="https://mon-site-inter.net/horaires" class="en-savoir-plus-horaires en_savoir_plus">En savoir plus</a>
  </div>
</div>

le CSS correspondant :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
.fermee,
.ouverte {
  display: block;
  width: 5em;
  text-align: center;
  line-height: 2;
  color: #FFF;
}
.fermee {
  background-color: #C03842;
}
.ouverte {
  background-color: #42C038;
}
.fermee:before {
  content: "Fermée";
}
.ouverte:before {
  content: "Ouverte";
}

le fichier JS où tu veux :

Code:

<script src="show-horaires.js"></script>

Seul ce fichier JS serait à modifier, la structure de l'objet pourrait être éventuellement améliorée suivant le nombre de médiathèques à gérer afin de rendre la maintenance plus facile.

Voilà une approche bien différente de ce que tu proposes.

07/09/2023, 15h09
spip93

Bonjour NoSmoking,

Tout d'abord un graaaannnd merci :merci:
Je n'en demandais pas tant, mais c'est super :bravo: :ccool:

J'ai fait quelques modifs à la marge (j'ai ainsi remplacé le document.getElementById("horaires") par document.querySelector('#horaires .liste-horaires') car ça mettait les horaires dans la div horaires justement et non dans liste-horaires) mais sinon ça fonctionne nickel.
De plus, c'est suffisamment clair pour que mes collègues puissent mettre les mains dedans au cas où.
Même pour moi, ça va être plus simple. Je n'aurais plus à faire certaines manip (comme mettre des antislash de partout, ou mettre le HTML sur une ligne) pour intégrer du html dans le fichier JS.

D'ailleurs ta remarque c'est par rapport à quoi (à quel(s) code(s))** ? Tu parles du code HTML, du code JS ou des deux ?
Pour ma défense, le code JS, c'est en grande partie le client qui nous l'a fourni il y a 3 ans. Vu mon niveau en JS (encore plus bas à l'époque) et le fait que j'étais pressé à l'époque pour finir, j'ai pas cherché à comprendre et à le reprendre surtout, du moins jusqu'à aujourd'hui où je profite d'un calme relatif pour reprendre la page d'accueil où apparaissent les horaires. Mon tort est ici.

En tout cas, encore :merci: pour m'avoir aidé.
A l'avenir je reprendrais ton code si besoin.

Bonne journée ;)

** Soit dit en passant, je ne t'en veux pas du tout. Tu n'as pas à t'excuser. Je t'en voudrais si ça n'était pas justifié et/ou surtout si tu n'avais pas un (bien) meilleur niveau que moi notamment en JS (autrement je ne serais pas ici à demander de l'aide :mrgreen:)
14/09/2023, 12h06
NoSmoking

Citation:

D'ailleurs ta remarque c'est par rapport à quoi (à quel(s) code(s))** ? Tu parles du code HTML, du code JS ou des deux ?

Du code JS, n'ayant pas regardé plus avant le HTML.
C'est surtout dans un premier temps l'utilisation d'un document.write puis l'utilisation inappropriée, à mon sens, des else associée à la répétition des codes

Citation:

** Soit dit en passant, je ne t'en veux pas du tout.

ouf !!!