Création, mise en forme d'une IFRAME

Exploiter les possibilités d'inclure un site dans un autre avec les iframes.

Les iframes permettent d'inclure une page dans une autre. Nous allons les découvrir petit à petit.

Code de base d'un iframe:

<iframe name="**" src="**" width="**" height="**">**</iframe>

Champs à remplacer:

name: nom du iframe, par habitude on met "I1" ,I2.. avec le numéro de l'iframe quand il y en a plusieurs. Mais ceci n'est rien d'obligatoire. Cette étape est indispensable si vous voulez ouvrir un une page dedans, on verra comment faire par la suite.

src: url de la page qui se chargera par défaut dans le cadre.

width: largeur en pixels du cadre.

height: hauteur en pixels du cadre.

Entre <noframes> et </noframes>: Mettre une phrase que les visiteurs auront si leur navigateur n'est pas compatible avec les iframes. Je vous rassure, la plupart des navigateurs le sont.

Code pour améliorer l'iframe:

(Se place entre <iframe et >.)

Bordure: insérer frameborder="**" border="**" où ** représente l'épaisseur désirée. Mettre la valeur 0 permet de masquer l'existence d'une IFRAME à condition de mettre la même couleur de fond sur la page contenant l'IFRAME et celle contenue à l'intérieur.

Alignement: Pour placer une iframe, il est quelquefois utile de lui donner un alignement. Pour cela, il suffit de rajouter align="**" où ** peut prendre la valeur de top, middle, left, center, right, etc...

Barres de défilement: Quand la page insérée dans l'iframe est plus grande que l'iframe lui-même, on pourrait croire que cela pose problème. En réalité, le navigateur rajoute une barre de défilement automatiquement, comme sur une page quelconque. Mais on peut contrôler cette barre en ajoutant
scrolling="**" où ** vaut "no" pour mettre aucune barre de défilement, attention, seulement une partie de la page sera visible, il faudra alors cliquer dedans et bouger la souris vers le haut, le bas, la droite ou la gauche, c'est donc à proscrire. Si on remplace "**" par "yes", la barre de défilement sera toujours présente, même si la page contenue dans le cadre est inférieure au cadre.

Utilisation:

Maintenant nous savons comment utiliser les iframes. Certes c'est bien, mais nous ne savons pas à quoi ils servent et ce que nous pouvons en faire.

L'utilisation la plus courante est de faire un cadre et de faire charger une page dedans. En effet, il est pratique quand un site comporte de nombreuses pages et qu'on veut que toutes les rubriques du site s'affichent sur une partie de la page, lorsqu'on modifie un lien, nous devons le faire sur chaque page? Grace aux iframes, une seule fois suffit.
En effet, il suffit de faire une page qui contiendra le menu des rubriques là où on le désire, un header, un footer et placer un iframe où on veut que le contenu de la page change. Une fois l'iframe placé, il faut faire les liens. Mais alors, comment faire ouvrir un lien dans l'iframe? C'est très simple, il suffit de mettre, pour chaque lien à ouvrir dans l'iframe, le code suivant:

<a href="url de la page à charger dans l'iframe" title="Titre du lien" target="nom du iframe">Texte, image ou autre</a>

C'est ici que le nom du iframe s'avère important, vous savez, on a pour habitude de le nommer I1, I2.... Et ben voila à quoi sert le nom du cadre, ce qui permet d'avoir plusieurs cadres sur la même page. Par contre, la page à charger dans le cadre ne doit que le contenu de la page en question, elle ne doit absolument pas contenir les menus etc. Ce qui permet de modifier seulement la page contenant le cadre pour apporter une modification au menu et aux headers et footers.

Le problème est qu'avec cette utilisation, si on met un compteur de visiteurs en ligne, il sera affiché une fois, mais une seule fois. En effet, si vous restez plusieurs heures sur un site, le compteur est en évolution permanente, mais il ne sera pas mis à jour puisque la page contenant le cadre n'a pas été actualisée depuis le début de la visite. Une des solutions est d'ajouter un autre iframe contenant seulement le compteur en masquat la bordure et les barres de défilement qui va s'autoactualiser toutes les minutes par exemple pour qu'il soit en permanence à jour. Dans ce cas, il faut placer un iframe de la taille du compteur et le faire actualiser automatiquement en plaçant ce code entre <head> et </head>.

<meta http-equiv="refresh" content="60">

Où 60 représente l'intervalle des autoactualisations en secondes. Le compteur de visiteurs en ligne sera alors en permanence mis à jour pendant la visite.
Attention cependant à ne pas mettre un compteur de visites sans cookies, dans ce cas, cela rajouterait une visite à chaque actualisation, ce qui fausserait les statistiques.

Limites des iframes:

Certes les iframes sont très pratiques, mais ils ont quand même quelques défauts non négligeables.

Le premier et principal se trouve au niveau du référencement. En effet, vous ne pourrez pas référencer les pages contenues à l'intérieur du cadre, puisque celles ci ne comportent plus les menus, headers et footers. Il faut donc se débrouiller d'empêcher le référencement de ces pages par les robots des moteurs de recherche.
Il existe cependant une alternative, pour ne pas qu'une page s'ouvre sans le frame en contour. Il suffit d'inserer dans les <head> de chaque page le script java ci-dessous:

<script type="text/javascript">



if (parent.frames.length < 1)

{

document.location.href = ' page contenant l'iframe ';

}

</script>

Il suffit alors de remplir le nom de la page et sa localisation (en lien relatif ou absolu), et cela devrait marcher.
Cela résout alors le problème du référencement.

Autre petit inconvénient, on ne peut pas avoir l'url de la page où on se trouve. En effet, celle qui s'affiche dans la barre d'adresses est celle contenant le header, le cadre etc..., et si on clique sur cette url on retombera à nouveau sur la page chargée par défaut. Le même problème se pose au niveau de l'actualisation. En effet, la solution est de cliquer avec le bouton de droite de la souris et de sélectionner actualiser, cela actualisera la page contenue dans le cadre.

Il existe une alternative aux cadres n'ayant pas ces problèmes, ce sont les includes en php, mais elles nécessitent des connaissances en php, alors que les iframes sont très simples à utiliser.

Quelques conseils:

Voila quelques petites astuces qui serviront à optimiser le graphisme de votre page.
Déjà, il est bien de personnaliser les barres de défilement, si celles ci existent bien évidemment. Pour cela, rien de trop difficile, il suffit de se rendre sur le tuto de Pouzy . Il faut copier ce code sur chacune des pages qui seront chargées dans le cadre.
De plus, il faut faire attention au nombre de barres de défilement. En effet, il ne faut pas qu'il y aient deux paires de barres de défilement. Pour cela, si il y en a dans le cadre, veillez à ne pas en mettre dans la page contenant l'iframe. Vous allez voir, la navigation est tout aussi agréable. Peut-être serez vous obligé de développer plusieurs versions selon la résolution d'écran du visiteur avec un script spécial.

/! Les iFrames ne sont plus valides depuis le standard XHTML 1.0 Transitionnel

Par 1 , Le 18 Février 2005 à 17h05
Ce tutoriel est la propriété d'Aidoweb et ne peut en aucun cas être copié.

Retour à HTML/CSS

Commentaires sur cet article

Les deux petites fautes ont été corrigées, merci du signalement

Excellent tutoriel! A continuer.
Cependant, on résout, on ne résoud pas.

Attention : dans le code <iframe name="**" src="**" width="**" heigh="**">**</iframe> , il y a une faute importante : le mot heigh contient une erreur : il s'écrit height !

Bonjour
tous d'abord merci pour se tutorial qui est trés bien.
Mais j'ai une question, je voudrai savoir comment faire pour afficher un renseignement sur ma page index.php qui figure à la base dans ma page iframe (accueil.php).
(exemple: j'ai ma page iframe acceuil.php je souhaite affiché mon titre de page (<title></title>) dans ma page index.php) Comment faire?
j'ai essayé quelque truc mais n'hétant pas assée expérimentée sa ne marche pas.

Je te remercie par avance.