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

**spip93** · 03/09/2023, 12h50

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 html :

Sélectionner tout - Visualiser dans une fenêtre à part

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 js :

Sélectionner tout - Visualiser dans une fenêtre à part

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 js :

Sélectionner tout - Visualiser dans une fenêtre à part

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 html :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :
Nom : bloc_horaires_appel_html.png
Affichages : 356
Taille : 11,0 Ko

Au lieu de celui-ci :
Nom : bloc_horaires_habituels.png
Affichages : 348
Taille : 23,8 Ko

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

**NoSmoking** · 04/09/2023, 09h41

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

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 html :

Sélectionner tout - Visualiser dans une fenêtre à part

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 css :

Sélectionner tout - Visualiser dans une fenêtre à part

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 html : Sélectionner tout - Visualiser dans une fenêtre à part
```
<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.

**spip93** · 07/09/2023, 15h09

Bonjour NoSmoking,

Tout d'abord un graaaannnd merci

Je n'en demandais pas tant, mais c'est super

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

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

)

**NoSmoking** · 14/09/2023, 12h06

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

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

ouf !!!

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

JavaScript

Vue hybride

Discussions similaires

Partager

Partager