Iframe et taille

Iframe et taille - HTML/CSS - Programmation

Marsh Posté le 20-07-2006 à 11:37:52    

Bonjour.
 
Je m'occupe de la maintenance d'un site web.
Chaque lien s'ouvre dans une iframe possédant une taille bien spécifique.
 
Je dois rajouter une nouvelle page assez haute, comment faire ceci?
Si je met du 100% ca ne fait rien.
 
Il n'y a pas moyen de faire une iframe qui s'auto adapte à la page qu'il doit afficher?
Autre solution : peux etre faire un lien ou on pourrait spécifier la taille de l'iframe dans laquelle la nouvelle page doit s'afficher?
 
Si vous avez des solutions je suis preneur.
 
Cordialement

Reply

Marsh Posté le 20-07-2006 à 11:37:52   

Reply

Marsh Posté le 20-07-2006 à 11:51:11    

il n'est pas possible d'acceder au contenu d'une iframe
seule l'iframe peut acceder au contenu de son parent :D
 
j'ai fait ca pour une demande à la con d'un client :  
sur la page qui est appelée tu fais ça :  

Code :
  1. <body onload="IframeStruct('iframe1');">


dans la page qui contient l'iframe, tu met un id sur l'iframe, ici c'est iframe1

Code :
  1. <iframe id="iframe1">


 
et la fonction Javascript qui va avec :  

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.getElementsByTagName("body" )[0].scrollHeight+"px";
  6. }

Reply

Marsh Posté le 20-07-2006 à 12:16:03    

Oula, sous firefox ca fait rien en tout cas.

Reply

Marsh Posté le 20-07-2006 à 12:19:59    

colle le code de chaque page que tu as modifié
car mon coco ce truc fonction sous tous les navigateur (gros projet oblige et lcient con oblige)

Reply

Marsh Posté le 20-07-2006 à 12:22:26    

ok je copie colle.

Code :
  1. <script language="JavaScript" type="text/JavaScript">
  3.       function IframeStruct(iframeid) {
  5.           if (!window.parent) return;
  7.           var myiframe = window.parent.document.getElementById(iframeid);
  9.           if(!myiframe) return;
  11.           myiframe.style.height = document.getElementsByTagName("body" )[0].scrollHeight+"px";
  13.       }
  14. </script>


 
Ensuite

Code :
  1. <body onload="IframeStruct('iframe1');" bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">


 
Et pour finir

Code :
  1. <iframe id="iframe1" scrolling ="no" src="about.htm" height="100%" width="100%" frameborder="0"></iframe>


 
 
Sous IE ca ne s'ouvre meme pas dans la frame!!!!!!!
 
merci


Message édité par masseur le 20-07-2006 à 12:44:54
Reply

Marsh Posté le 20-07-2006 à 13:01:47    

On admet 2 pages
page appelante (celle qui contient la balise iframe)
et page appelée (celle qui est appelée dans l'iframe)
 
 
Dans la page appelant tu met juste un id sur l'iframe, et tu vires ton height:100%
 
dans la page appelée tu colles le code Javascript (ou bien tu fais appel à ce code via un fichier .js joint)
et tu met aussi le onload="IframeStruct('iframe1');" dans cette page.
 
 
et au passage tu me colle tout le code HTML de la page appelante et tout le code html de la page appelée, merci [:petrus75]

Reply

Marsh Posté le 20-07-2006 à 13:33:33    

Je viens de faire les modifications.
 
Ma page appelante.

Code :
  1. <html>
  2. <head>
  3. <title>Masai Leisure</title>
  4. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
  5. <link href="css/css%20sheet.css" rel="stylesheet" type="text/css">
  6. <style type="text/css">
  7. <!--
  8. body,td,th {
  9. color: #FFFFFF;
  10. }
  11. a:link {
  12. color: #FFFFFF;
  13. text-decoration: none;
  14. }
  15. a:visited {
  16. text-decoration: none;
  17. color: #FFFFFF;
  18. }
  19. a:hover {
  20. text-decoration: none;
  21. color: #FF0000;
  22. }
  23. a:active {
  24. text-decoration: none;
  25. }
  27. #flash {
  29. }
  30. -->
  31. </style>
  33.    
  35. <script language="JavaScript" type="text/JavaScript">
  36. <!--
  37. function MM_reloadPage(init) {  //reloads the window if Nav4 resized
  38.   if (init==true) with (navigator) {if ((appName=="Netscape" )&&(parseInt(appVersion)==4)) {
  39.     document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
  40.   else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
  41. }
  42. MM_reloadPage(true);
  44. function MM_openBrWindow(theURL,winName,features) { //v2.0
  45.   window.open(theURL,winName,features);
  46. }
  47. //-->
  48. </script>
  49. </head>
  50. <body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
  51. <div id="Layer1" style="position:absolute; left:529px; top:479px; width:365px; height:35px; z-index:1"></div>
  52. <table width="100%" bgcolor="#DA251D" height="100%" border="0" cellpadding="0" cellspacing="0">
  53.   <tr>
  54.     <td>
  55. <table width="100%" border="0" cellpadding="0" cellspacing="0" background="images/Website_01.gif">
  56.   <tr>
  57.     <td>
  58. <table width="938" height="496" border="0" align="center" cellpadding="0" cellspacing="0" id="Table_01">
  59.         <tr>
  60.           <td width="53" height="495" rowspan="8"></td>
  61.           <td colspan="7" background="Images/Website_24.gif"><div id="flash"><center><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="786" height="114">
  62.         <param name="movie" value="banniere.swf">
  63.         <param name="quality" value="high">
  64.         <embed src="banniere.swf" width="786" height="114" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash"></embed></object>
  65.           </center>
  66.           </div></td>
  67.           <td width="71" height="495" rowspan="8">&nbsp; </td>
  68.         </tr>
  69.         <tr>
  70.    <td colspan="2">
  71.   <p><img src="images/Website_02.gif" alt="" width="272" height="33"></p>   </td>
  72.  <td colspan="3">
  73.   <img src="images/Website_03.gif" width="271" height="33" alt=""></td>
  74.  <td colspan="2">
  75.   <img src="images/Website_04.gif" width="272" height="33" alt=""></td>
  76.    </tr>
  77. <tr>
  78.  <td width="16">
  79.   <img src="images/Website_06.gif" width="16" height="27" alt=""></td>
  80.          <td height="27" colspan="5" background="images/Website_07.gif" class="menu-text"><font color="#FFFFFF"><font color="#FFFFFF"> <a href="about.htm" target="iframe">accueil</a>  <font color="#FF0000">|</font></font> <a href="aboutus.html" target="iframe">qui sommes-nous?</a> <font color="#FF0000">|</font> <a href="news.html" target="iframe">news</a> <font color="#FF0000">|</font>
  81.                     <a href="http://france.masai-products.com/fr/quad/" target="_blank">quads</a> <font color="#FF0000">| </font><a href="http://france.masai-products.com/fr/dirtbikes/" target="_blank">Dirtbikes</a> <font color="#FF0000">|</font> <a href="funstuff.html" target="iframe">espace “fun”</a>  <font color="#FF0000">|
  82.                   </font><a href="http://www.tribu-masai.com ">tribu</a> <font color="#FFFFFF"><font color="#FF0000">|</font></font><a href="contactus.html" target="iframe"> contactez-nous
  84. </a></font></td>
  85.          <td width="18">
  86.   <img src="images/Website_08.gif" width="18" height="27" alt=""></td>
  87. </tr>
  88. <tr>
  89.  <td colspan="2">
  90.   <img src="images/Website_09.gif" width="272" height="35" alt=""></td>
  91.  <td colspan="3">
  92.   <img src="images/Website_10.gif" width="271" height="35" alt=""></td>
  93.  <td colspan="2">
  94.   <img src="images/Website_11.gif" width="272" height="35" alt=""></td>
  95. </tr>
  96. <tr>
  97.  <td>   <img src="images/Website_12.gif" width="16" height="292" alt=""></td>
  98.          <td height="292" colspan="5"><iframe  id="iframe1" scrolling ="no" src="about.htm" frameborder="0"></iframe>    </td>
  99.  <td>
  100.   <img src="images/Website_14.gif" width="18" height="292" alt=""></td>
  101. </tr>
  102. <tr>
  103.  <td colspan="2">
  104.   <img src="images/Website_15.gif" width="272" height="42" alt=""></td>
  105.  <td colspan="3">
  106.   <img src="images/Website_16.gif" width="271" height="42" alt=""></td>
  107.  <td colspan="2">
  108.   <img src="images/Website_17.gif" width="272" height="42" alt=""></td>
  109. </tr>
  110. <tr>
  111.  <td rowspan="2">
  112.   <img src="images/Website_18.gif" width="16" height="66" alt=""></td>
  113.          <td height="23" colspan="5" background="images/Website_19.gif">
  114.                   <div align="right" class="menu-text"><font color="#FFFFFF"><font color="#FFFFFF"><font color="#FFFFFF"> <a href="revendeurs.php" target="iframe1">soutenez la tribu masai</a>  <font color="#FF0000">|</font></font> <a href="dealernetwork.html" target="iframe">r&eacute;seau de distributeurs agr&eacute;es</a>  <font color="#FF0000">|</font> <a href="sitemap.html" target="iframe">plan du site</a></font></font></div></td>
  115.  <td rowspan="2">
  116.   <img src="images/Website_20.gif" width="18" height="66" alt=""></td>
  117. </tr>
  118. <tr>
  119.  <td colspan="2">
  120.   <img src="images/Website_21.gif" width="260" height="43" alt=""></td>
  121.  <td width="261">
  122.   <img src="images/Website_22.gif" width="261" height="43" alt=""></td>
  123.  <td colspan="2">
  124.   <img src="images/Website_23.gif" alt="" width="260" height="43" onload="MM_openBrWindow('popup.html','','width=330,height=330')"></td>
  125. </tr>
  126. <tr>
  127.  <td>
  128.   <img src="images/spacer.gif" width="53" height="1" alt=""></td>
  129.  <td>
  130.   <img src="images/spacer.gif" width="16" height="1" alt=""></td>
  131.  <td width="256">
  132.   <img src="images/spacer.gif" width="256" height="1" alt=""></td>
  133.  <td width="4">
  134.   <img src="images/spacer.gif" width="4" height="1" alt=""></td>
  135.  <td>
  136.   <img src="images/spacer.gif" width="261" height="1" alt=""></td>
  137.  <td width="6">
  138.   <img src="images/spacer.gif" width="6" height="1" alt=""></td>
  139.  <td width="254">
  140.   <img src="images/spacer.gif" width="254" height="1" alt=""></td>
  141.  <td>
  142.   <img src="images/spacer.gif" width="18" height="1" alt=""></td>
  143.  <td>
  144.   <img src="images/spacer.gif" width="52" height="1" alt=""></td>
  145. </tr>
  146. </table>
  147. </td>
  148.   </tr>
  149. </table>
  150. </td>
  151.   </tr>
  152. </table>
  153. </body>
  154. </html>


 
et la page qui doit apparaitre dans la frame
 

Code :
  1. <html>
  2. <head>
  3. <title>REVENDEURS DERBI</title>
  4. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
  5. <meta http-equiv="content-language" content="fr, ca, ch, be">
  6. <meta name="language" content="fr, ca, ch, be">
  7. <meta name="description" content="Derbi, une gamme complète de scooters, motos et quads de 50, 125, 250 et 660 cm3: scooter Atlantis, scooter GP1 Racing, moto Senda R, moto Senda SM, moto GPR Nude, moto GPR Racing, moto Mulhacén et quad DXR.
  8. ">
  9. <meta name="Keywords" content="motos, moto, motos, derbi-france, GP1 racing, atlantis 27, atlantis 4t, Gp max 125, gp max 250, senda sm drd pro, senda sm drd edition, senda sm drd racing, senda sm x-treme, senda sm x-race, senda drd pro, senda r drd racing, gpr nude, gpr racing, senda r 125, senda sm 125, dirt boy 10, dirt kid 12, quad, drx 250, mini moto, mini motos, revendeurs derbi">
  10. <meta name="Revisit-after" content="15 days">
  11. <meta name="Identifier-URL" content="http://www.derbi-france.fr">
  12. <link href="css/css.css" rel="stylesheet" type="text/css">
  13. <link href="css/style.css" rel="stylesheet" type="text/css">
  14. <link href="css/css%20sheet.css" rel="stylesheet" type="text/css">
  15. <style type="text/css">
  16. <!--
  17. body,td,th {
  18. color: #FFFFFF;
  19. }
  20. a:link {
  21. color: #FFFFFF;
  22. text-decoration: none;
  23. }
  24. a:visited {
  25. text-decoration: none;
  26. color: #FFFFFF;
  27. }
  28. a:hover {
  29. text-decoration: none;
  30. color: #FF0000;
  31. }
  32. a:active {
  33. text-decoration: none;
  34. }
  36. #flash {
  38. }
  39. -->
  40. </style>
  41. <script type="text/javascript" src="infobulle.js"></script>
  42. <script language="Javascript" type="text/javascript">
  43. function verif_nombre(champ)
  44. {
  45. var chiffres = new RegExp("[0-9\]" );
  46. var verif;
  48. for(x = 0; x < champ.value.length; x++)
  49. {
  50. verif = chiffres.test(champ.value.charAt(x));
  51. if(verif == false){champ.value = champ.value.substr(0,x) + champ.value.substr(x+1,champ.value.length-x+1); x--;}
  52. }
  54. }
  55. </script>
  57. <script language="JavaScript">
  59. function sendData(data, page, method)
  60. {
  61.  if(document.all)
  62.  {
  63.   //Internet Explorer
  64.   var XhrObj = new ActiveXObject("Microsoft.XMLHTTP" ) ;
  65.  }
  66.  else
  67.  {
  68.      //Mozilla
  69.   var XhrObj = new XMLHttpRequest();
  70.  }
  73.  var content = document.getElementById("contenu" );
  76.   if(data == 'null')
  77.   {
  79.    XhrObj.open("GET", page, true);
  80.   }
  81.   else
  82.   {
  84.    XhrObj.open("GET", page+"?"+data, true);
  85.   }
  88.  XhrObj.onreadystatechange = function()
  89.  {
  90.   if (XhrObj.readyState == 4 && XhrObj.status == 200)
  91.    content.innerHTML = XhrObj.responseText ;
  92.  }
  95.   XhrObj.send(null);
  97. }
  100. </script>
  101.   <script language="JavaScript" type="text/JavaScript">
  102.  
  103.      
  104.  
  105.            function IframeStruct(iframeid) {
  106.  
  107.  
  108.                if (!window.parent) return;
  109.  
  110.  
  111.                var myiframe = window.parent.document.getElementById(iframeid);
  112.  
  113.      
  114.  
  115.                if(!myiframe) return;
  116.  
  117.  
  118.                myiframe.style.height = document.getElementsByTagName("body" )[0].scrollHeight+"px";
  119.  
  120.      
  121.  
  122.            }
  123.  
  124.       </script>
  126. <style type="text/css">
  127. <!--
  128. body {
  129. background-image: url(images_home/fondderbi.jpg);
  130. background-repeat: repeat-x;
  131. }
  132. -->
  133. </style></head>
  134. <body onload="IframeStruct('iframe1');" bgcolor="#ffffff" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
  135. <table width="990" border="0" cellpadding="0" cellspacing="0" background="fond_revendeur.jpg">......


 
Et malgrès tout je n'y arrive toujours pas.


Message édité par masseur le 20-07-2006 à 13:34:48
Reply

Marsh Posté le 20-07-2006 à 14:17:42    

vu la gueule de merde de ta page tu m'etonnes que ca marche pas [:moule_bite]
tout est fixé en hauteur dans ta page [:moule_bite]
 
et quand bien même ca devrait fonctionner sous IE
 
j'opterai pour un javascript de merde mal branlé qui ferait une erreur js dans ta page et du coup mon JS ne se lancerait pas [:petrus75]

Message cité 1 fois
Reply

Marsh Posté le 20-07-2006 à 14:20:37    

\o/ Wéééééh, des iframes, du javascript, des xmlHttpRequest ( dans les iframes )... comment s'trop bien le web2.0  :cry:

Message cité 1 fois
Message édité par anapajari le 20-07-2006 à 14:20:59
Reply

Marsh Posté le 20-07-2006 à 14:23:04    

anapajari a écrit :

\o/ Wéééééh, des iframes, du javascript, des xmlHttpRequest ( dans les iframes )... comment s'trop bien le web2.0  :cry:


web 0.2 [:aloy]

Reply

Marsh Posté le 20-07-2006 à 14:23:04   

Reply

Marsh Posté le 20-07-2006 à 14:58:03    

gatsu35 a écrit :

vu la gueule de merde de ta page tu m'etonnes que ca marche pas [:moule_bite]
tout est fixé en hauteur dans ta page [:moule_bite]
 
et quand bien même ca devrait fonctionner sous IE
 
j'opterai pour un javascript de merde mal branlé qui ferait une erreur js dans ta page et du coup mon JS ne se lancerait pas [:petrus75]


 
 Il y a que ce code la qu iagit sur la fame

Code :
  1. <td height="292" colspan="5">


 
En effet si je met 600 la frame s'agrandi à 600 pxl.
Il y a donc juste cette valeur qui bloque.
 
Mais même si je la met à 100% ca foire.
Pffffffff ca saoule!!!!!!!!!!!!!
 
Merci

Reply

Marsh Posté le 20-07-2006 à 15:22:42    

seul moyen virer les iframe et faire des div avec overflow si tu tiens aux ascenseurs et là tout s'adapte au contenu niveau taille

Reply

Marsh Posté le 20-07-2006 à 15:44:55    

sinon tu vires ta putain de hauteur fixée et tu nous emmerde pas [:petrus75]

Message cité 1 fois
Reply

Marsh Posté le 21-07-2006 à 07:54:13    

gatsu35 a écrit :

sinon tu vires ta putain de hauteur fixée et tu nous emmerde pas [:petrus75]


 
Laquelle de hauteur précise stp.
J'ai essayé de les virer ces putains de hauteur fixe mais ca change rien.
 
Ca me rends dingue que de voir de si grosses boites faire des sites comme des merdes.
Moi c'est du xhtml strict avec des div à bloc.
 
Mais la je ne peux pas me permettre de remodifier tout le site.

Message cité 1 fois
Reply

Marsh Posté le 21-07-2006 à 09:21:44    

masseur a écrit :

Laquelle de hauteur précise stp.
J'ai essayé de les virer ces putains de hauteur fixe mais ca change rien.
 
Ca me rends dingue que de voir de si grosses boites faire des sites comme des merdes.
Moi c'est du xhtml strict avec des div à bloc.
 
Mais la je ne peux pas me permettre de remodifier tout le site.


Bon ok bienvenue à toi frère du travail propre.
 
Ben tu leur dit clairement ceci :  
Votre site est fait d'une manière tellement fixe, que c'est limite impossible de faire ce que vous voulez faire, sans refaire entièrement la page appelante de l'iframe.
Et de plus si votre site a du contenu dynamique, cela est impensable d'avoir un layout aussi fixe.

Reply

Marsh Posté le 21-07-2006 à 12:56:36    

J'ai refait une page à part, en faisant à ma manière.
VOila c'est reglé.
Merci Gatsu35 pour ton aide.

Reply

Sujets relatifs:

Leave a Replay

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