web-dev-qa-db-fra.com

Alternative pour les cadres en html5 utilisant des iframes

Je suis nouveau dans HTML5 et j’ai fait quelques recherches et découvert que l’utilisation de <frameset> est obsolète et d'après ce que j'ai lu <iframes> ne sont pas. Alors quelqu'un peut m'aider, je veux obtenir le même résultat que l'exemple présenté, mais en utilisant <iframes> ou un autre substitut de <frameset> qui n'est pas obsolète dans HTLM5?

<frameset cols="20%,*,">
    <frame src="menu.html">
    <frame src="events.html">
</frameset>
jqueryhtml5iframeframeset
26
user2682329

Les cadres sont obsolètes car ils gênaient la navigation dans les URL et les hyperliens, car ils ne vous mèneraient que vers la page d'index (avec le jeu de cadres) et il n'existait aucun moyen de spécifier le contenu de chacune des fenêtres. Aujourd'hui, les pages Web sont souvent générées par des technologies côté serveur telles que PHP, ASP.NET, Ruby etc.). Ainsi, au lieu d'utiliser des cadres, les pages peuvent simplement être générées en fusionnant un modèle avec un contenu comme celui-ci. :

Fichier de modèle 

<html>
<head>
<title>{insert script variable for title}</title>
</head>

<body>
  <div class="menu">
   {menu items inserted here by server-side scripting}
  </div>
  <div class="main-content">
   {main content inserted here by server-side scripting}
  </div>
</body>
</html>

Si vous ne supportez pas complètement un langage de script côté serveur, vous pouvez également utiliser des inclusions côté serveur ( SSI ). Cela vous permettra de faire la même chose - c'est-à-dire. générer une seule page Web à partir de plusieurs documents sources.

Mais si vous voulez simplement qu'une partie de votre page Web soit une "fenêtre" distincte dans laquelle vous pouvez charger d'autres pages Web qui ne sont pas nécessairement situées sur votre propre serveur, vous devrez utiliser un iframe .

Vous pouvez émuler votre exemple comme ceci:

Exemple de cadres 

<html>
<head>
  <title>Frames Test</title>
  <style>
   .menu {
      float:left;
      width:20%;
      height:80%;
    }
    .mainContent {
      float:left;
      width:75%;
      height:80%;
    }
  </style>
</head>
<body>
  <iframe class="menu" src="menu.html"></iframe>
  <iframe class="mainContent" src="events.html"></iframe>
</body>
</html>

Il y a probablement de meilleures façons de réaliser la mise en page. J'ai utilisé l'attribut CSS float , mais vous pouvez également utiliser des tables ou d'autres méthodes.

29
drwatsoncode

Bien que je sois d’accord avec tout le monde, si vous préférez utiliser des cadres, vous pouvez simplement index.html en XHTML, puis créer le contenu des cadres en HTML5.

6
user2302019

HTML 5 prend en charge les iframes. Il y avait quelques attributs intéressants ajoutés comme "sandbox" et "srcdoc".

http://www.w3schools.com/html5/tag_iframe.asp

ou vous pouvez utiliser

<object data="framed.html" type="text/html"><p>This is the fallback code!</p></object>
4
user9371102