IFRAME qui s'adapte à la hauteur de son contenu

IFRAME qui s'adapte à la hauteur de son contenu - HTML/CSS - Programmation

Marsh Posté le 22-10-2006 à 07:49:40    

salut
 
d'aprés vous quel est le meilleur moyen pour faire un IFRAME qui s'adapte automatiquement à la hauteur de la page qu'il affiche, même si la page en question change de hauteur ou change d'adresse
 
le but de l'opération, c'est d'afficher un cadre autour d'une page qui serait chargée dans un IFRAME et ce cadre s'addapterai automatiquement à la hauteur du contenu, même si une autre page est chargée dans l'IFRAME et tout ça sans mettre de code dans la page qui est chargé dans l'IFRAME, c'est à dire que le programme qui permettra ça sera uniquement dans la page qui contient les balises IFRAME
 
merci d'avance
 
 :hello:


---------------
NOUVEAU!! Février 2024 : j'ai créé un nouveau jeu en ligne : https://www.boblybots.com
Reply

Marsh Posté le 22-10-2006 à 07:49:40   

Reply

Marsh Posté le 22-10-2006 à 08:52:13    

Ya une méthode simple
page appelante :  

Code :
  1. <html>
  2. <body>
  3. <iframe id="iframe1" src="pageappelee" width="100%" frameborder="0" style="border:none">
  5. </iframe>
  6. </body>
  7. </html>


 
page appelée :

Code :
  1. <html>
  2. <body onload="IframeStruct('iframe1');">
  3. contenu de l'iframe
  4. </body>
  5. </html>


 
fonction JS :  

Code :
  1. function IframeStruct(iframeid) {
  2. if (!window.parent) return;
  3. var myiframe = window.parent.document.getElementById(iframeid);
  4. if(!myiframe) return;
  5. myiframe.style.height = document.body.scrollHeight+"px";
  6. }

Reply

Marsh Posté le 22-10-2006 à 09:04:23    

merci
 
sauf qu'il faut que ça fonctionne sans mettre de code dans la page qui est chargée dans l'IFRAME
 
mais c'est bon j'ai trouvé :
 

Code :
  1. <html>
  2. <head>
  5. <script>
  8. function actu_iframe(){
  9. if(document.all) document.all.id_iframe.style.height = document.frames("id_iframe" ).document.body.scrollHeight;
  10. else document.getElementById("id_iframe" ).style.height = document.getElementById("id_iframe" ).contentDocument.body.scrollHeight;
  11. }
  14. </script>
  17. </head>
  18. <body>
  20. <a href="page1.html" target="name_iframe">Page 1</a>
  21. | <a href="page2.html" target="name_iframe">Page 2</a>
  22. | <a href="page3.html" target="name_iframe">Page 3</a>
  24. <br><br>
  26. <iframe onLoad="actu_iframe();" src="page1.html" name="name_iframe" id="id_iframe" width=600 height=600 frameborder=no SCROLLING=auto>
  27. </iframe>
  29. <br> ICI LE BAS DE L'IFRAME
  31. </BODY>
  32. </HTML>


 
 
 


---------------
NOUVEAU!! Février 2024 : j'ai créé un nouveau jeu en ligne : https://www.boblybots.com
Reply

Marsh Posté le 22-10-2006 à 09:15:36    

:jap:  
Il reste plus qu'à vérifier que tu puisse accéder à contentDocument si la page appelée est sur un autre serveur


Message édité par gatsu35 le 22-10-2006 à 09:15:53
Reply

Marsh Posté le 22-10-2006 à 09:24:56    

oui ça marche que si les pages chargées dans l'iframe sont sur le même site, car sinon ya des problèmes d'autorisations entre les pages
 
:jap:
 


---------------
NOUVEAU!! Février 2024 : j'ai créé un nouveau jeu en ligne : https://www.boblybots.com
Reply

Marsh Posté le 22-10-2006 à 09:33:28    

au fait question con mais pourquoi tester le document.all ???
alors qu'un simple :  

Code :
  1. var ifr = document.getElementById("id_iframe" );
  2.  if (ifr) ifr.style.height = ifr.contentDocument.body.scrollHeight+"px";


Au passage tu testes si l'iframe existe comme ça tu es sur de ne pas générer d'erreur JS
et ensuite j'ai ajouté "px", car il faut toujours indiquer les unités en CSS.
C'est surtout valable si tu utilises un doctype correct et que ton navigateur passe en mode strict.
 
Mais autant prendre la bonne habitude tout de suite

Reply

Marsh Posté le 22-10-2006 à 10:08:14    

en plus je crois que body.scrollHeight ça marche que avec internet explorer, avec firefox la hauteur de page à une autre identité


---------------
NOUVEAU!! Février 2024 : j'ai créé un nouveau jeu en ligne : https://www.boblybots.com
Reply

Marsh Posté le 22-10-2006 à 10:24:05    

dans ce cas essaye le offsetHeight

Reply

Marsh Posté le 22-10-2006 à 10:36:25    

ha oui c'est ca la hauteur de page avec FF, maintenant reste plus qu'a faire une fonction qui marche avec IE et FF :)


---------------
NOUVEAU!! Février 2024 : j'ai créé un nouveau jeu en ligne : https://www.boblybots.com
Reply

Marsh Posté le 22-10-2006 à 10:39:54    

hummmmm cent balles que offsetHeight fonctionne pour IE :o

Reply

Marsh Posté le 22-10-2006 à 10:39:54   

Reply

Marsh Posté le 22-10-2006 à 10:47:27    

non sur IE c'est scrollHeight
 
c'est une des nombreuses différences qu'il y a entre IE et FF :)


---------------
NOUVEAU!! Février 2024 : j'ai créé un nouveau jeu en ligne : https://www.boblybots.com
Reply

Marsh Posté le 22-10-2006 à 11:02:09    

Les pages que tu testes n'ont même pas de doctype non plus.
 
bon enfin pour répondre à ta question :  

Code :
  1. if (function structIframe() {
  2. var ifr = document.getElementById("id_iframe" );
  3.         if (ifr) {
  4.   ifr.style.height = (ifr.contentDocument.body.scrollHeight ? ifr.contentDocument.body.scrollHeight : ifr.contentDocument.body.offsetHeight)+"px";
  5.   }
  6. }

Reply

Marsh Posté le 22-10-2006 à 11:49:11    

je suis désolé, je n'ai pas réussi à faire marcher ta fonction avec IE
 
voilà ce que j'ai bricolé, ça marche avec IE et FF et la hauteur s'ajuste automatiquement à chaque fois qu'on change la page qui est dans l'iframe
 

Code :
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
  2. <html>
  3. <head>
  6. <script>
  9. function actu_iframe(){
  12. if(navigator.appName=="Microsoft Internet Explorer" ){
  14.  if(document.all) document.all.id_iframe.style.height = document.frames("id_iframe" ).document.body.scrollHeight;
  15.  else document.getElementById("id_iframe" ).style.height = document.getElementById("id_iframe" ).contentDocument.body.scrollHeight;
  17.  }
  18. else{
  20.  document.getElementById("id_iframe" ).style.height = document.getElementById("id_iframe" ).contentDocument.body.offsetHeight+"px";
  22.  }
  24. }
  26. </script>
  29. </head>
  30. <body>
  32. <a href="page1.html" target="name_iframe">Page 1</a>
  33. | <a href="page2.html" target="name_iframe">Page 2</a>
  34. | <a href="page3.html" target="name_iframe">Page 3</a>
  36. <br><br>
  38. <iframe onLoad="actu_iframe();" src="page1.html" name="name_iframe" id="id_iframe" width=600 height=50 frameborder=yes SCROLLING=auto>
  39. </iframe>
  41. <br> ICI LE BAS DE L'IFRAME
  43. </BODY>
  44. </HTML>


---------------
NOUVEAU!! Février 2024 : j'ai créé un nouveau jeu en ligne : https://www.boblybots.com
Reply

Marsh Posté le 22-10-2006 à 12:39:21    

Après plusieurs et nombreux tests, le scrollHeight est toujours mauvais lorsqu'on essaye de le récupérer sur l'iframe depuis la page appelante.
 
seule la solution que je t'ai donné plus haut fonctionne correctement.
 
Au passage tu n'as toujours pas mis de doctype correct

Reply

Marsh Posté le 22-10-2006 à 14:10:41    

ben je sais pas trop quoi te dire, le script que j'ai mis plus haut marche parfaitement chez moi avec IE et FF, pour le doctype je l'ai mis et ça change rien, j'y arrive pas avec ta fonction, on doit pas avir le même internet explorer :)


---------------
NOUVEAU!! Février 2024 : j'ai créé un nouveau jeu en ligne : https://www.boblybots.com
Reply

Marsh Posté le 14-11-2006 à 16:06:18    

Bonjour,
 
Y a-t-il moyen d'adapter automatiquement la hauteur de l'iframe pour un contenu dont la hauteur est dynamique (genre une liste lue en BDD) ?
 
Merci.

Reply

Marsh Posté le 14-11-2006 à 16:19:24    

Les iframes c'est naze :o Vaut mieux faire sans

Reply

Marsh Posté le 14-11-2006 à 18:52:46    

et c'est pas xhtml strict :o

Reply

Marsh Posté le 14-11-2006 à 18:58:45    

mouahahahaha  
*s'en va faire tout pleins d'iframe*
[:arhendal]

Reply

Marsh Posté le 06-11-2011 à 07:30:26    

au lieu de se la péter avec des "bouh les iframes c'est que pour les nuls"
essayez de proposer une solution pour les remplacer  :pt1cable:  :pt1cable:  
 
sans php !
et sans javascript !
ni feuilles css de la mort qui tuent
 
alors ? :heink:
on fait moins les malins !
 
bien pratique le <a target="nomdemaframe" quand même, non?
 
les solutions simple ne sont pas destinées qu'aux esprits simples...
 
sinon CID, 5 ans plus tard ton script y marche bien avec le renard, avec IE9 c'est la mouise et alors avec Chrome, je t'en parle même pas :cry:  :cry:  :cry:

Reply

Marsh Posté le 06-11-2011 à 07:31:40    

au lieu de se la péter avec des "bouh les iframes c'est que pour les nuls"
essayez de proposer une solution pour les remplacer  :pt1cable:  :pt1cable:  
 
sans php !
et sans javascript !
ni feuilles css de la mort qui tuent
 
alors ? :heink:
on fait moins les malins !
 
bien pratique le <a target="nomdemaframe" quand même, non?
 
les solutions simple ne sont pas destinées qu'aux esprits simples...
 
sinon CID, 5 ans plus tard ton script y marche bien avec le renard, avec IE9 c'est la mouise et alors avec Chrome, je t'en parle même pas :cry:  :cry:  :cry:

Reply

Marsh Posté le 06-11-2011 à 07:32:05    

au lieu de se la péter avec des "bouh les iframes c'est que pour les nuls"
essayez de proposer une solution pour les remplacer  :pt1cable:  :pt1cable:  
 
sans php !
et sans javascript !
ni feuilles css de la mort qui tuent
 
alors ? :heink:
on fait moins les malins !
 
bien pratique le <a target="nomdemaframe" quand même, non?
 
les solutions simples ne sont pas destinées qu'aux esprits simples...
 
sinon CID, 5 ans plus tard ton script y marche bien avec le renard, avec IE9 c'est la mouise et alors avec Chrome, je t'en parle même pas :cry:  :cry:  :cry:

Reply

Marsh Posté le 06-11-2011 à 08:14:51    

:bounce:  
 
CID, je sais pas si 5 ans plus tard t'as encore les mains dans le camboui du web mais c'est toi le meilleur ! you are the best !!!!
 
ton script marche avec FF 7 IE 9 et... CHROME !  
C'est en "local" que ça bloque avec ie et chrome mais in situe tout est ok
 
faut renommer ce post "re-dimentionner automatiquement un iframe (vous savez, cette balise pour les nazes) : un script qui fonctionne !"
paske des scripts qui marche pas/plus yen a plein les fauxrums et je sais de quoi je parle !
 
ps: j'entends déjà les bien-faisants du web :
"si vous arrêtez pas de trouver des solutions pour cette balise de m... comment vous voulez qu'on s'en débarrasse ?"
 
EH BEN JUSTEMENT ON VEUT PAS !
je lance une pétition : SAUVONS LA BALISE IFRAME !

Reply

Marsh Posté le    

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed