web-dev-qa-db-fra.com

Comment définir dynamiquement la taille d'iframe

Comment définir les dimensions d'un iframe de manière dynamique afin que la taille soit flexible pour différentes tailles de fenêtres?

Par exemple:

<iframe src="html_intro.asp" width="100%" height="300">
  <p>Hi SOF</p>
</iframe>

Dans ce cas, la hauteur est différente selon la taille de la fenêtre du navigateur. Il doit être défini dynamiquement en fonction de la taille de la fenêtre du navigateur.

Quelle que soit la taille, le format d'image iframe doit être identique. Comment cela peut-il être fait?

htmliframeresize
17
Fero

Si vous utilisez jquery, vous pouvez le faire en utilisant $(window).height();

<iframe src="html_intro.asp" width="100%" class="myIframe">
<p>Hi SOF</p>
</iframe>

<script type="text/javascript" language="javascript"> 
$('.myIframe').css('height', $(window).height()+'px');
</script>
27
Naveen Velaga

Pas tout à fait sûr de ce que le 300 est censé vouloir dire? Mlle faute de frappe? Cependant, pour les iframes, il serait préférable d’utiliser CSS :) - Lors de l’importation de vidéos youtube, j’ai trouvé que lorsqu’il importait des vidéos youtube, il ignorait tout ce qui était en ligne. 

<style>
    #myFrame { width:100%; height:100%; }
</style>

<iframe src="html_intro.asp" id="myFrame">
<p>Hi SOF</p>
</iframe>
10
Graeme Leighfield

Avez-vous essayé height="100%" dans la définition de votre iframe? Il semble faire ce que vous cherchez, si vous ajoutez height:100% dans le CSS pour "body" (sinon, 100% sera "100% de votre contenu").

EDIT: ne faites pas cela. L'attribut height (ainsi que celui width) doivent avoir un entier comme valeur, pas une chaîne.

2
Lamecarlate

J'ai trouvé que cela fonctionnait mieux sur tous les navigateurs et appareils (PC, tables et mobiles).

<script type="text/javascript">
                      function iframeLoaded() {
                          var iFrameID = document.getElementById('idIframe');
                          if(iFrameID) {
                                // here you can make the height, I delete it first, then I make it again
                                iFrameID.height = "";
                                iFrameID.height = iFrameID.contentWindow.document.body.scrollHeight + "px";
                          }   
                      }
                    </script> 


<iframe id="idIframe" onload="iframeLoaded()" frameborder="0" src="yourpage.php" height="100%" width="100%" scrolling="no"></iframe>
0
Rocco The Taco