Comment mettre à l'échelle le contenu d'une iframe?

de Kip solution devrait fonctionner sur Opera et Safari si vous modifiez le fichier CSS:

<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 aussi spécifier overflow: hidden on #frame pour empêcher les barres de défilement.

j'ai trouvé une solution qui fonctionne dans IE et Firefox (au moins sur les versions actuelles). Sur Safari/Chrome, l'iframe est réduite à 75% de sa taille d'origine, mais le contenu de l'iframe n'est pas mis à l'échelle. À l'Opéra, cela ne semble pas fonctionner. Cela semble un peu ésotérique, donc s'il y a une meilleure façon de le faire, je serais heureux de recevoir 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>

Note: j'ai dû utiliser L'élément wrap pour Firefox. Pour une raison quelconque, dans Firefox quand vous objet de 75%, il utilise toujours la taille originale de l'image pour des raisons de mise en page. (Essayez de supprimer le div du code échantillon ci-dessus et vous verrez ce que je veux dire.)

j'ai trouvé certaines de ces de cette question .

après avoir lutté avec cela pendant des heures en essayant de le faire fonctionner dans IE8, 9, et 10 voici ce qui a fonctionné pour moi.

ce CSS dépouillé fonctionne en FF 26, Chrome 32, Opera 18, et IE9 -11 à partir 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éfinir la largeur / hauteur pour correspondre à l'iframe, et ajouter-ms-zoom sur le .envelopper div conteneur:

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

il suffit d'utiliser votre méthode préférée pour renifler le navigateur pour inclure CSS approprié, voir est-il possible de faire des CSS conditionnels spécifiques au navigateur à l'intérieur d'un *.fichier css? pour quelques idées.

IE7 était une cause perdue depuis -ms-zoom n'existait pas jusqu'à IE8.

voici le HTML que j'ai testé avec:

<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 /

suite à réponse de lxs : j'ai remarqué un problème où avoir à la fois les étiquettes zoom et --webkit-transform en même temps semble confondre Chrome (version 15.0.874.15) en faisant une sorte de double zoom d'effet. J'ai pu contourner le problème en remplaçant zoom par -ms-zoom (ciblant SEULEMENT IE), en laissant Chrome pour utiliser seulement l'étiquette --webkit-transform , et cela a éclairci les choses.

vous n'avez pas besoin d'envelopper l'iframe avec une étiquette supplémentaire. Assurez-vous simplement d'augmenter la largeur et la hauteur de l'iframe par le même montant que vous réduisez la taille de l'iframe.

p.ex. pour porter la teneur en 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 avez besoin d'échelle les dimensions.

pensait que je partagerais ce que j'ai trouvé, en utilisant une grande partie de ce qui a été donné ci-dessus. Je N'ai pas vérifié le Chrome, mais ça marche dans IE, Firefox et Safari, autant que je sache.

les offsets spécifiques et le facteur de zoom dans cet exemple ont fonctionné pour rétrécir et centrer deux sites Web dans les iframes pour les onglets Facebook (810px largeur).

les deux sites utilisés étaient un site wordpress et un réseau ning. Je ne suis pas très bon avec html, donc cela pourrait probablement avoir 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>

html{zoom: 0.4;} ?- )

je pense que vous pouvez le faire en calculant la hauteur et la largeur que vous voulez avec javascript (via document.corps.clientWidth etc.) et ensuite injecter l'iframe dans votre HTML comme ceci:

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

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

si vous voulez que l'iframe et son contenu soient mis à l'échelle lorsque la fenêtre redimensionne, vous pouvez définir ce qui suit à l'événement redimensionner de la fenêtre ainsi qu'à 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';
  };

cela fera l'iframe et son échelle de contenu à 100% de la largeur de l'enveloppe div (ou quel que soit le pourcentage que vous voulez). Comme bonus supplémentaire, vous n'avez pas à définir les css du cadre à des valeurs codées dures car elles seront toutes définies dynamiquement, vous aurez juste besoin de vous soucier de la façon dont vous voulez l'écharpe div à afficher.

j'ai testé ceci et cela fonctionne sur chrome, IE11, et firefox.

pour ceux d'entre vous qui ont de la difficulté à obtenir ce fonctionnement 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, pas le iframe id. D'après mon expérience, avec la fonction zoom qui essaie de mettre à l'échelle la div iframe de #frame , elle mettrait à l'échelle la taille iframe et non le contenu qu'elle contient (ce qui est ce que vous cherchez).

ressemble à ça. Ça marche pour moi sur IE8, Chrome et FF.

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

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

#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; 

}

la solution # wrap # frame fonctionne très bien, à condition que les nombres dans #wrap soit #frame multiplié par le facteur d'échelle. Il montre seulement cette partie du cadre réduit. Vous pouvez le voir ici réduire les sites Web et le mettre dans une forme de pinterest comme (avec le plugin woodmark jQuery):

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

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

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

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

évidemment pas essayer de corriger le parent, il suffit d'ajouter 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 n'a pas essayé cela.

je viens de tester et pour moi, aucune des autres solutions n'a fonctionné. J'ai simplement essayé et cela a fonctionné parfaitement sur Firefox et Chrome, comme je l'avais prévu:

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

et la 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;
}

cette échelle tout le contenu de 30%. Les pourcentages largeur/hauteur doivent évidemment être ajustés en conséquence (1 / scale_factor).

si votre html est stylisé avec css, vous pouvez probablement lier différentes feuilles de style pour différentes tailles.

Je ne pense pas que HTML ait une telle fonctionnalité. La seule chose que je peux imaginer faire l'affaire: effectuer un traitement côté serveur. Peut-être pourriez-vous obtenir une image instantanée de la page Web que vous voulez servir, la mettre à l'échelle sur le serveur et la servir au client. Il s'agirait toutefois d'une page non interactive. (peut-être une image map pourrait avoir le lien, mais quand même.)

une autre idée serait d'avoir un composant côté serveur qui modifierait le HTML. Un peu comme la fonction de zoom firefox 2.0. ce n'est évidemment pas un zoom parfait, mais c'est mieux que rien.

sinon, je n'ai plus d'idées.

comme dit, je doute que vous puissiez le faire.

Peut-être Pouvez-vous au moins mettre à l'échelle le texte lui-même, en définissant un style font-size: 80%; .

Non testé, pas sûr que ça marche, et ne veut pas redimensionner les boîtes ou les images.

je remarque que la mise à l'échelle se produit automatiquement lorsque je définit la largeur du conteneur(DIV parent) dans la page cible pas en pixels , mais en et seulement en pourcentage. Ça arrive automatiquement.

1.Dans mon cas, je définis pour exmpl. 480px la largeur de la div où iframe. 2.J'ai mis 100% largeur 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 )en cadre, et c'est exactement ce qui se passe, dans chaque cas de largeur de cadre.

Pourquoi il ne travaillant qu'en pourcentage?