Help - Search - Member List - Calendar
Full Version: Pb. Ancres Dans Iframe (js/php)
OpenSpace > Zone Ordinateurs > Programmation
Sha
07/07/2003 16:32
Je vais essayer d'expliquer mon pb clairement, car c'est relativement compliqué, accrochez-vous happy.gif

Alors voilà, je suis en train de construire un site web en dynamique, avec du php et du js. Le site est visible en maquette là :

http://www.univ-tlse2.fr/geoprdc/imadoc

Notez que la page contient divers layers/calques, dont un principal en blanc qui contient une iframe, remplie dynamiquement par du js selon l'endroit où l'utilisateur clique dans l'interface de la page principale.

Dans ce site, j'ai un moteur de recherche (un script php qui fouille dans des tables MySQL), qui peut remonter des entrées de glossaire en réponse. Par exemple, je cherche le mot "Pixel", la page de résultats de recherche me présente l'entrée de glossaire correspondante.

Le clic sur cette réponse me renvoie sur la page du glossaire concerné, et j'aimerais que cette page de glossaire se scrolle pour afficher le mot recherché tout en haut (la page pourra en effet être longue).

Le problème : chaque mot de la page de glossaire est en fait une ancre (tag <a> anchor), mais comme la page est dans une iframe, elle ne se scrolle pas jusqu'a l'ancre quand on l'appelle avec #ancre.

Comment faire pour demander à la page de scroller ?

PS: j'ai essayé de fournir l'ancre sous forme de variable au script php qui remplit l'iframe, transformant à la volée la variable en #ancre, mais cela ne fonctionne pas.

PPS: je débute dans le développement de sites dynamiques, donc ce site n'est surement pas très innovant, mais si vous voulez le code php n'hésitez pas à demander wink.gif



Sha
07/07/2003 17:34
Pour aider un peu à la compréhension, j'ai mis en ligne un test tout bête, qui lui fonctionne :

http://www.univ-tlse2.fr/geoprdc/imadoc/test.html

Cette page contient juste le calque (div) et l'iframe, cette dernière étant remplie (src="") par la page de glossaire et une ancre.

L'erreur dans le site réel doit donc venir du remplissage dynamique de l'iframe... Voici la fonction JS incriminée :

function loadOuter(doc) {
document.getElementById('Fiche').src = doc;
}

Cette fonction JS est apellée par un onload de la forme :

onLoad="loadOuter(fiche.php?fiche=RG2#Pixel);"



Gfx
07/07/2003 18:06
Bon donc chez moi ça marche de faire un <iframe src="page.html#ancre"> mais voici une solution JavaScript.

La page de test à lancer :
CODE

<html>
 <body>
   <h1>Ceci est un test de scroll</h1>
   <div>
     Voici notre iframe :
   </div>
   <iframe src="inner.html#ancre2" />
 </body>
</html>


Et le contenu de la frame :
CODE

<html>
 <script type="text/javascript">
 <!--
   function getPositionY(element)
   {
     var position = 0;
     while (element != null && element.nodeName != "iframe")
     {
       position += element.offsetTop;
       element   = element.offsetParent;
     }
     return position;
   }
   
   function gotoAnchor()
   {
     var str = window.location.toString();
     var pos = str.indexOf("#");
     var str = str.substring(pos + 1);

     var anchor = document.getElementById(str);
     var offset = getPositionY(anchor);

     window.setTimeout('window.scrollTo(0, ' + offset + ')', 500);
   }
 -->
 </script>
 <body onLoad="gotoAnchor()">
   <h2>Nous sommes dans l'iframe</h2>
   <div>
     Voici une liste d'éléments avec ancres :
     <ol>
       <li><a id="ancre1" />Ancre 1</li>
       <li><a id="ancre2" />Ancre 2</li>
       <li><a id="ancre3" />Ancre 3</li>
       <li>
       ... du blabla pour que la barre de scroll apparaisse ...
       </li>
       <li><a id="ancre4" />Ancre 4</li>
     </ol>
   </div>
 </body>
</html>
Sha
07/07/2003 19:28
Merci de ton aide, Gfx, mais ça chie toujours dans les potirons tongue.gif

L'offset se calcule bien, mais ce la ne scrolle pas :/
Sha
07/07/2003 19:59
D'ailleurs c'est étrange, quand j'utilise index.php?fiche=RG2#Pixel, c'est pas l'iframe qui se scrolle, mais la page principale...

Une nouvelle piste : passer par le node parent, cf. : http://www.devscripts.com/visit.php?sId=908



Gfx
08/07/2003 0:37
On verra ça demain. Toujours est-il que mon exemple marche très bien tongue.gif Tu cherches les embrouilles toi :-))
Sha
08/07/2003 6:29
Bah ouais ton exemple il marche bien, mais moi je veux fister l'iframe avec un src= dans du php biggrin.gif

(Pis là tu t'emmerde moins, non ?)
Sha
08/07/2003 9:23
Bon, ça y est j'ai trouvé !

En cherchant un autre exemple de remplissage dynamique de calque / iframe, je suis tombé sur celui ci :

http://www.dansteinman.com/dynduo/examples...ce2-change.html

J'ai adapté à mon problème et ça marche ! Sans même avoir à transmettre l'ancre d'une page à l'autre en variable php,<simplement en laissant le # dans l'url.

Tout fonctionne bien maintenant.

Vous pouvez tester là :

http://www.univ-tlse2.fr/geoprdc/imadoc/in...RG2&ancre=Pixel



Gfx
08/07/2003 19:19
Tu fais n'int koi et tu expliques trop mal ton problème c0nnard :-)))
Sha
08/07/2003 20:20
Ouais je sais je suis un amateur bordélique, surtout comparé à certains happy.gif
Peter Pan
08/07/2003 20:24
QUOTE
Scanner
Le scanner est un appareil cyan avec des poils.
Sha
08/07/2003 21:23
Bah oui, quand on remplit les tables de test trop tard le soir avec Loupitour et sa bande sur l'IRC... rolleyes.gif
This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.
Invision Power Board © 2001-2024 Invision Power Services, Inc.