Frames et formulaires

On déconseille aux webmasters d'utiliser les frames car elles barrent la route aux robots des moteurs de recherche entre autres inconvénients, notamment celui de la sécurité.

Mais pour une application Web, vous pouvez avoir besoin des frames et il importe peu que les robots indexent les pages.

En fait on constate un retour étonnant des frames sur des sites importants: Google (Image Search par exemple), Digg (pour sa barre d'outils), Facebook et Stumbleupon parmi d'autres.
Le procédé à ses inconvénients et ses avantages.

Parmi les inconvénients, citons l'impossibilité de passer nativement des paramètres de formulaires aux frames dans un frameset. Mais on va voir comment il peut être dépassé.

On peut transférer de l'information entre frames avec l'objet window

On définit un jeu de deux cadres:

<frameset rows="300,*">
  <frame src="frame1.html" name="topFrame" id="topFrame"  />
  <frame src="frame2.html" name="bottomFrame" id="bottomFrame"  />
</frameset>

Pour passer de l'information entre frame1 et frame2 on utilise:

window.top

A quoi on associe le nom de la frame, et le chemin d'accès à un élément, par exemple:

window.top.topFrame.document.getElementById("frame2"); 

Pour le tester on crée un formulaire dans chaque frame pour entrer du texte, et un champ pour insérer le texte venant de l'autre frame.

Dans la frame du haut, on va insérer des données venant de celle du bas dans l'élément dont l'id est frame1.

<div id="frame1">Empty </div>

Le code JavaScript dans la frame du bas, il lit la valeur d'un champ de texte du formulaire et l'envoie à la frame du haut en passant par window.top:

function sendit()
{
  var content = document.form2.mytext.value;
  window.top.topFrame.document.getElementById("frame1").innerHTML = content;
} 

il est associé à l'évènement onclick d'un bouton:

 <input type="button" name="Submit" value="Send to top" onclick="sendit()" />

Il en est de même pour envoyer des données de la frame du haut vers celle du bas, comme on le voit dans le code source de la démonstration...

• Essayer la démo.
• Télécharger l'archive de la démo.

On transmet les données d'un formulaire entre frames avec PHP

Si l'on veut utiliser l'attribut "action" du formulaire et transmettre ses données à une autre page, on peut passer par la page contenant le jeu de cadres, mais celle-ci doit alors ajouter les paramètres, par exemple avec du code PHP.

<frameset rows="300,*">
  <frame src="frame1.html<?php parameters();?>" name="topFrame" id="topFrame"  />
  <frame src="frame2.html" name="bottomFrame" id="bottomFrame"  />
</frameset>

La fonction PHP qui récupère et transmet les données est très simple:

function parameters()
{
   $login=$_POST['login'];
   $password=$_POST['password'];
   if(!empty($login))
   {
     echo "?login=$login&password=$password";
   }
}

On peut généraliser le code en récupérant toutes les clés de $_POST et toutes les valeurs et en formant une chaîne débutant par le code "?" avec les couples clé-valeur séparés par "&".