web-dev-qa-db-fra.com

Comment puis-je redimensionner le contenu d'un iframe?

Comment puis-je redimensionner le contenu d'un iframe (dans mon exemple, il s'agit d'une page HTML et non d'un popup) dans une page de mon site Web?

Par exemple, je souhaite afficher le contenu qui apparaît dans l'iframe à 80% de la taille d'origine.

htmlcssdom
201
John Griffiths

La solution de Kip devrait fonctionner sur Opera et Safari si vous changez le CSS en:

<style>
    #wrap { width: 600px; height: 390px; padding: 0; overflow: hidden; }
    #frame { width: 800px; height: 520px; border: 1px solid black; }
    #frame {
        -ms-zoom: 0.75;
        -moz-transform: scale(0.75);
        -moz-transform-Origin: 0 0;
        -o-transform: scale(0.75);
        -o-transform-Origin: 0 0;
        -webkit-transform: scale(0.75);
        -webkit-transform-Origin: 0 0;
    }
</style>

Vous pouvez également vouloir spécifier overflow: caché sur #frame pour empêcher les barres de défilement.

201
lxs

J'ai trouvé une solution qui fonctionne dans IE et Firefox (au moins sur les versions actuelles). Sous Safari/Chrome, l'iframe est redimensionné à 75% de sa taille d'origine, mais le contenu de l'iframe n'est pas du tout redimensionné. Dans Opera, cela ne semble pas fonctionner. Cela semble un peu ésotérique, donc s'il y a une meilleure façon de le faire, j'accepterais des suggestions.

<style>
#wrap { width: 600px; height: 390px; padding: 0; overflow: hidden; }
#frame { width: 800px; height: 520px; border: 1px solid black; }
#frame { zoom: 0.75; -moz-transform: scale(0.75); -moz-transform-Origin: 0 0; }
</style>

...

<p>Some text before the frame</p>
<div id="wrap">
<iframe id="frame" src="test2.html"></iframe>
</div>
<p>Some text after the frame</p>
</body>

Remarque: je devais utiliser l'élément wrap pour Firefox. Pour une raison quelconque, dans Firefox, lorsque vous réduisez l'objet à 75%, il utilise toujours la taille d'origine de l'image pour des raisons de mise en page. (Essayez de supprimer la div de l'exemple de code ci-dessus et vous verrez ce que je veux dire.)

J'ai trouvé une partie de cela de cette question .

51
Kip

Après avoir lutté pendant des heures pour essayer de le faire fonctionner dans IE8, 9 et 10, voici ce qui a fonctionné pour moi.

Ce CSS simplifié fonctionne dans FF 26, Chrome 32, Opera 18 et IE9-11 à compter du 1/7/2014:

.wrap
{
    width: 320px;
    height: 192px;
    padding: 0;
    overflow: hidden;
}

.frame
{
    width: 1280px;
    height: 786px;
    border: 0;

    -ms-transform: scale(0.25);
    -moz-transform: scale(0.25);
    -o-transform: scale(0.25);
    -webkit-transform: scale(0.25);
    transform: scale(0.25);

    -ms-transform-Origin: 0 0;
    -moz-transform-Origin: 0 0;
    -o-transform-Origin: 0 0;
    -webkit-transform-Origin: 0 0;
    transform-Origin: 0 0;
}

Pour IE8, définissez la largeur/hauteur pour qu'elle corresponde à l'iframe, puis ajoutez -ms-zoom au div de conteneur .wrap:

.wrap
{
    width: 1280px; /* same size as frame */
    height: 768px;
    -ms-zoom: 0.25; /* for IE 8 ONLY */
}

Utilisez simplement votre méthode préférée de recherche de navigateur pour inclure conditionnellement le CSS approprié. Voir Existe-t-il un moyen de créer du CSS conditionnel spécifique au navigateur dans un fichier * .css? pour quelques idées.

IE7 était une cause perdue puisque -ms-zoom n'existait pas avant IE8.

Voici le code HTML réel avec lequel j'ai testé:

<div class="wrap">
   <iframe class="frame" src="http://time.is"></iframe>
</div>
<div class="wrap">
    <iframe class="frame" src="http://Apple.com"></iframe>
</div>

http://jsfiddle.net/esassaman/PnWFY/

27
Eric Sassaman

Suivi de Réponse de lxs : J'ai remarqué un problème où le fait de disposer simultanément des balises zoom et --webkit-transform semble confondre Chrome (version 15.0.874.15) en effectuant une sorte d'effet à double zoom. J'ai pu contourner le problème en remplaçant zoom par -ms-zoom (destiné uniquement à Internet Explorer), laissant Chrome utiliser uniquement la balise --webkit-transform pour que tout soit réglé.

9
r3cgm

Vous n'avez pas besoin d'envelopper l'iframe avec une balise supplémentaire. Assurez-vous simplement que vous augmentez la largeur et la hauteur de l'iframe du même montant que vous réduisez celui-ci.

par exemple. pour redimensionner le contenu d'iframe à 80%:

#frame { /* Example size! */
    height: 400px; /* original height */
    width: 100%; /* original width */
}
#frame {
    height: 500px; /* new height (400 * (1/0.8) ) */
    width: 125%; /* new width (100 * (1/0.8) )*/

    transform: scale(0.8); 
    transform-Origin: 0 0;
}

Fondamentalement, pour obtenir la même taille iframe, vous devez redimensionner les dimensions.

9
Matthew Wilcoxson

Je pensais partager ce que je pensais, en utilisant une grande partie de ce qui avait été donné ci-dessus. Je n'ai pas vérifié Chrome, mais cela fonctionne dans IE, Firefox et Safari, pour autant que je sache.

Les décalages spécifiques et le facteur de zoom dans cet exemple permettent de réduire et de centrer deux sites Web dans des iframes pour les onglets Facebook (largeur de 810 pixels).

Les deux sites utilisés étaient un site wordpress et un réseau ning. Je ne suis pas très bon avec le HTML, donc cela aurait probablement pu être fait mieux, mais le résultat semble bon.

<style>
    #wrap { width: 1620px; height: 3500px; padding: 0; position:relative; left:-100px; top:0px; overflow: hidden; }
    #frame { width: 1620px; height: 3500px; position:relative; left:-65px; top:0px; }
    #frame { -ms-zoom: 0.7; -moz-transform: scale(0.7); -moz-transform-Origin: 0px 0; -o-transform: scale(0.7); -o-transform-Origin: 0 0; -webkit-transform: scale(0.7); -webkit-transform-Origin: 0 0; }
</style>
<div id="wrap">
    <iframe id="frame" src="http://www.example.com"></iframe>
</div>
7
Jon Fergus

html {zoom: 0.4;}? - -

6
roenving

Si vous souhaitez que l'iframe et son contenu soient mis à l'échelle lorsque la fenêtre est redimensionnée, vous pouvez définir comme suit l'événement de redimensionnement de la fenêtre, ainsi que l'événement iframes onload.

function()
{
    var _wrapWidth=$('#wrap').width();
    var _frameWidth=$($('#frame')[0].contentDocument).width();

    if(!this.contentLoaded)
      this.initialWidth=_frameWidth;
    this.contentLoaded=true;
    var frame=$('#frame')[0];

    var percent=_wrapWidth/this.initialWidth;

    frame.style.width=100.0/percent+"%";
    frame.style.height=100.0/percent+"%";

    frame.style.zoom=percent;
    frame.style.webkitTransform='scale('+percent+')';
    frame.style.webkitTransformOrigin='top left';
    frame.style.MozTransform='scale('+percent+')';
    frame.style.MozTransformOrigin='top left';
    frame.style.oTransform='scale('+percent+')';
    frame.style.oTransformOrigin='top left';
  };

Ainsi, l’iframe et son contenu s’échelonnent à 100% de la largeur de la div de wrap (ou au pourcentage souhaité). En prime, vous n'avez pas besoin de définir les valeurs css du cadre sur des valeurs codées en dur, car elles seront toutes définies de manière dynamique. Vous aurez juste à vous soucier de la façon dont vous souhaitez afficher la division wrap. 

J'ai testé cela et cela fonctionne sur chrome, IE11 et Firefox.

4
user3298597

Je pense que vous pouvez le faire en calculant la hauteur et la largeur souhaitées avec javascript (via document.body.clientWidth etc.), puis en injectant l'iframe dans votre code HTML comme suit:

 var element = document.getElementById ("myid"); 
 element.innerHTML + = "<iframe src = 'http: //www.google.com' height = '200' width = '" + document .body.clientWidth * 0.8 + "'/>";

Je n'ai pas testé cela dans IE6 mais il semble fonctionner avec les bons :)

4
Eric Wendelin

C'était ma solution sur une page de 890px de large 

#frame { 
overflow: hidden;
position: relative;
width:1044px;
height:1600px;
-ms-zoom: 0.85;
-moz-transform: scale(0.85);
-moz-transform-Origin: 0px 0;
-o-transform: scale(0.85);
-o-transform-Origin: 0 0;
-webkit-transform: scale(0.85);
-webkit-transform-Origin: 0 0; 

}
3
Mathias Asberg

Pour ceux d'entre vous qui ont des difficultés à faire fonctionner cela dans IE, il est utile d'utiliser -ms-zoom comme suggéré ci-dessous et d'utiliser la fonction de zoom sur le #wrap div, et non l'ID iframe. D'après mon expérience, si la fonction zoom essayait de redimensionner le div iframe de #frame, elle redimensionnerait la taille de l'iframe et non son contenu (ce que vous recherchez). 

Ressemble à ça. Fonctionne pour moi sur IE8, Chrome et FF.

#wrap {
  overflow: hidden;
  position: relative;
  width:800px;
  height:850px;
  -ms-zoom: 0.75;
}
3
user1598890

Je viens de tester et pour moi, aucune des autres solutions ne fonctionnait ..J'ai tout simplement essayé et cela fonctionnait parfaitement sous Firefox et Chrome, comme je l'avais prévu

<div class='wrap'>
    <iframe ...></iframe>
</div>

et le css:

.wrap {
    width: 640px;
    height: 480px;
}

iframe {
    width: 76.92% !important;
    height: 76.92% !important;
    -webkit-transform: scale(1.3);
    transform: scale(1.3);
    -webkit-transform-Origin: 0 0;
    transform-Origin: 0 0;
}

Ceci redimensionne tout le contenu de 30%. Les pourcentages largeur/hauteur du parcours doivent être ajustés en conséquence (1/scale_factor).

3
MrP01

Donc, probablement pas la meilleure solution, mais semble fonctionner correctement.

<IFRAME ID=myframe SRC=.... ></IFRAME>

<SCRIPT>
    window.onload = function(){document.getElementById('myframe').contentWindow.document.body.style = 'zoom:50%;';};
</SCRIPT>

Évidemment, ne pas essayer de réparer le parent, ajoutez simplement le style "zoom: 50%" au corps de l'enfant avec un peu de javascript.

Peut-être pourrait définir le style de l'élément "HTML", mais je n'ai pas essayé.

2
Graham

La solution #wrap #frame fonctionne correctement, à condition que les nombres dans #wrap correspondent à #frame fois le facteur d'échelle. Il ne montre que cette partie du cadre réduit. Vous pouvez le voir ici en réduisant les sites Web et en le mettant dans une forme semblable à celle d'un site Web (avec le plugin woodmark jQuery):

http://www.genautica.com/sandbox/woodmark-index.html

2
Stefan Gruenwald

Si votre HTML est stylé avec CSS, vous pouvez probablement lier différentes feuilles de style pour différentes tailles.

1
Jon

Je ne pense pas que HTML a une telle fonctionnalité. La seule chose que je peux imaginer qui ferait l'astuce est de faire un traitement côté serveur. Peut-être pourriez-vous obtenir un instantané de la page Web que vous souhaitez diffuser, le redimensionner sur le serveur et le transmettre au client. Ce serait cependant une page non interactive. (peut-être qu'un imagemap pourrait avoir le lien, mais quand même.) 

Une autre idée serait d’avoir un composant côté serveur qui modifierait le code HTML. Très semblable à la fonctionnalité de zoom de firefox 2.0. ce n'est bien sûr pas un zoom parfait, mais c'est mieux que rien.

Sinon, je suis à court d'idées.

0
Alexandros Marinos

Je remarque que la mise à l'échelle se produit automatiquement lorsque je définit la largeur du conteneur (DIV parent) dans la page cible, non pas en pixels, mais uniquement en pourcentage . Elle s'effectue automatiquement.

1.Dans mon cas, je définis pour exemple. Largeur 480px pour div où iframe sera défini. 2.J'ai défini une largeur de 100% pour iframe . 3. J'ai défini une largeur de 250% pour le div parent dans la page cible (5 images x 50% de la largeur de l'écran).

Mon intention est de montrer 2 images (en largeur) dans le cadre, et c'est exactement ce qui se passe, dans tous les cas de largeur du cadre.

Pourquoi ça marche seulement en pourcentage?

0
Toni Risteski

Comme dit, je doute que vous puissiez le faire.
Vous pouvez peut-être au moins mettre à l'échelle le texte lui-même en définissant un style font-size: 80%;.
Non testé, pas sûr que cela fonctionne, et ne redimensionnera pas les boîtes ou les images.

0
PhiLho