Page embarqué par Iframe proprement et alternative.

**Kitsune64** · 08/11/2020, 10h32

Bonjour,

J'aurai voulu avoir des avis sur la balise HTML <iframe>. Je crée quelques pages web en local chez moi en HTML, CSS et un peu de Javascript pour l'instant.
J'aimerai évité pour le moment le php ou base MySQL. En ce moment j'utilise la balise <iframe> pour la navigation et ne pas avoir à réécrire le menu principale et mettre à jour le contenu d'une page...

Est-ce une bonne idée comme procédé? Si non; quel serait un meilleur choix?

Deuxièment ma question principale avant de me lancer dans ce topic était: pour qu'un site soi valide W3C avec des balises iframe faut-il que chaques page même celles embarquée par <iframe> contienne les balises <head> <title> <doctype html> <body> etc...Je me pose cette question car si je suis la logique d'un iframe ces balises risques de se répéter lors du chargement d'une de mes page. Comment utiliser cette balise proprement donc voilà ma question? donc une iframe juste avec les balise <p> dans une page embarqué par une autre page qui contiendrait <body> par exemple permettrait-elle de faire passer le site en W3C?

Merci.

**NoSmoking** · 09/11/2020, 08h17

Bonjour,

J'aimerai évité pour le moment le php ou base MySQL. (...)
Est-ce une bonne idée comme procédé? Si non; quel serait un meilleur choix?

Les <iframe> sont plutôt prévues pour « embarquer » des éléments venant d'autres horizons que le tien, mais rien ne t'empêche de les utiliser comme tu le fais pour un menu en attendant que tu ne l’intègres directement, ou automatiquement côté serveur, quand tu te sentiras apte à le mettre en place.

pour qu'un site soi valide W3C avec des balises iframe faut-il (...)

le contenu des <iframe> représente un contenu à part et hors context de ta page principale, même si certaines balises peuvent être omises il me semble préférable que chaque document intégré soit valide. Cela ne sera que mieux lorsque tu auras décidé de te passer de l'<iframe>, tu n'auras rien de plus à faire.

**Kitsune64** · 09/11/2020, 10h50

Donc un site web à généralement son menu qui est intégré de façon manuelle sur chacune des pages sans passé par une iframe ou autre technique du genre? (Cad copié collé le code du menu sur chaque page?)

**mathieu** · 09/11/2020, 13h34

quand un site contient des éléments qui se répètent, il vaut mieux utiliser du code côté serveur (comme PHP par exemple) ou du code côté client (comme JavaScript par exemple).

si vous voulez utiliser du JavaScript, vous pouvez regarder comment faire avec jQuery qui simplifie beaucoup de chose comme par exemple créer un nouvel élément HTML de votre menu :
https://api.jquery.com/category/manipulation/

**NoSmoking** · 09/11/2020, 15h25

il vaut mieux utiliser du code côté serveur (comme PHP par exemple)

tout à fait avec un simple <?php include ... ?>.

(...) vous pouvez regarder comment faire avec jQuery (...)

oui mais non

Pour un menu une simple boucle d'insertion sur base d'un objet JSON est suffisante et simple à réaliser.

Toutefois si jQuery est utilisé par ailleurs alors là OUI !

**Kitsune64** · 09/11/2020, 17h19

Json et Jquery ca me semble vague tout ça car je n'ai pas de connaissances dans ces deux termes là..Est-ce nécessaire? Un menu en Javascript j'ai essayé de trouvé des tutoriaux la dessus mais ça me semble plus difficile à mettre en oeuvre qu'en HTML et CSS. pour l'instant c'est ainsi que je travails sur base d'une liste à puce (ul, li)

Avez vous sous la main un code minimal se basant sur du Javascript? aussi non possible que par la suite j'en viendrais au php..Mais en ce moment je travail en local donc ca me semblait faire du lourd en installant "mon propre serveur php" via Wamp je crois alors que je peux faire léger avec les languages cités.

------------

Je réédite le message après quelques recherches supplémentaire j'ai trouvé une piste en Javascript qui pourrait me convenir. Merci.

Voici un code si ça intéresse quelqu'un.

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
 
 
<!DOCTYPE html>
<html><head>
    <script type='text/javascript'>
    <!--  w ww  .ja  v  a 2  s.  c  om-->
        function MenuR(){               
            var ul=document.createElement('ul');
        var li=document.createElement('li');
        li.innerHTML="<a href=''>Acceuil</a>"+" "+"Page d'Acceuil";
        ul.appendChild(li);
                var li=document.createElement('li');
        li.innerHTML="<a href=''>Codes</a>"+" "+"Sometext";
        ul.appendChild(li);
                document.getElementById('twitter_status').appendChild(ul);
    }
    </script>
</head>
<body >
  <div id="bloc"></div>
  <script type="text/javascript">
<!--
MenuR();
-->
</script>
</body>
</html>

Il ne restera plus qu'a séparer le script js du code et appeler la fonction pour faire appel au menu dans chaque page

**NoSmoking** · 10/11/2020, 09h20

Je te soumet une façon de procéder simple et qui tiens en peu de ligne, pour navigateurs modernes

Dans ta page HTML, et donc toutes celles concernées par ton menu, il suffit de réserver une place pour ton menu, par exemple

Code html :

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

1
2
3
4
5
6
<body>
  <header>
    <nav></nav>
  </header>
  <main>
    <!-- la suite du document -->

à partir de là il faut créer ton « objet JSON » décrivant tes différents liens, par exemple :

Code javascript :

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
const menu = [
  {
    text: "Accueil",
    href: "accueil.html"
  },
  {
    text: "Blog",
    href: "blog.html"
  },
  {
    text: "News",
    href: "news.html"
  },
  {
    text: "?",
    href: "about.html"
  }
];

... rien de bien compliqué, chaque lien dirigera vers le href et apparaitra à l'écran sous text.

Maintenant la routine de création, en « JavaScript moderne » :

Code javascript :

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

1
2
3
4
5
6
7
document.addEventListener("DOMContentLoaded", () => {
  const docHref = document.location.pathname.split("/").pop();
  const oDest = document.querySelector("nav");
  menu.forEach((m) => {
    oDest.insertAdjacentHTML("beforeend", `<a href="${m.href}" ${m.href == docHref ? 'class="isactive"' : ""}>${m.text}</a>`);
  });
});

... on notera qu'ici le lien vers la page active sera désactivé en CSS.

Voilà le tour est joué ou presque, il faut prévoir un minimum de CSS pour que cela ait de la « gueule ».

On pourrait mettre par exemple :

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
nav {
  display: inline-flex;
  line-height: 2.5em;
  cursor: pointer;
}
nav a {
  padding: 0 1em;
  text-align: center;
  text-decoration: none;
  color: #08F;
}
nav a:hover {
  background: #EEE;
}
nav a.isactive {
  color: #888;
  pointer-events: none;
}

Maintenant si on fait la synthèse tout cela, il faut intégrer le fichier JS et le CSS, qui peut se trouver dans la feuille de style générale, on aurait quelque chose comme :

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
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Page Accueil</title>
<link rel="stylesheet" href="menu-auto.css">
<script src="menu-auto.js"></script>
</head>
<body>
  <header>
    <nav></nav>
  </header>
  <main>
    <section>
      <h1>Accueil</h1>
    </section>
  </main>  
</body>
</html>

Le fichier appelé ci-dessus menu-auto.js ressemblerait à :

Code javascript :

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
"use strict";
//  Définition des liens
const menu = [
  {
    text: "Accueil",
    href: "accueil.html"
  },
  {
    text: "Blog",
    href: "blog.html"
  },
  {
    text: "News",
    href: "news.html"
  },
  {
    text: "?",
    href: "about.html"
  }
];
//  Création des éléments
document.addEventListener("DOMContentLoaded", () => {
  const docHref = document.location.pathname.split("/").pop();
  const oDest = document.querySelector("nav");
  menu.forEach((m) => {
    oDest.insertAdjacentHTML("beforeend", `<a href="${m.href}" ${m.href == docHref ? 'class="isactive"' : ""}>${m.text}</a>`);
  });
});

Note qu'en PHP la même démarche pourra être appliquée.

**Kitsune64** · 10/11/2020, 15h12

Merci pour votre réponse claire. Hélas je suis confronté à un autre problème qui rentre en conflit avec le language Javascript et auquel je ne peux pas faire grand chose à part passer je pense au PHP comme vous l'avez proposez au début. J'aimerai que le site soit navigable, lisible, en partie en tout cas, dans un navigateur en mode textuel. Hors je me rend compte que Links et Lynx ne supporte pas le language Javascript...Du coup pas de menu. Et l'hébergeur sur lequel je suis ne permet pas à Lynx de se connecté sur le site ce qui est un tout autre soucis. J'ai vu lynx pouvoir navigué sur certains site en php par contre ce qui m'a étonné.

**NoSmoking** · 10/11/2020, 17h39

je ne peux pas faire grand chose à part passer je pense au PHP comme vous l'avez proposez au début.

C'est la solution de bas et, comme également dit, la démarche de réalisation de ton menu inclus sera la même que celle que je t'ai proposée.

Page embarqué par Iframe proprement et alternative.

HTML

Discussions similaires

Partager

Partager