Wie kann ich den Inhalt eines Iframes skalieren?

Wie kann ich den Inhalt eines Iframes (in meinem Beispiel eine HTML-Seite und kein Popup) auf einer Seite meiner Website skalieren?

Zum Beispiel möchte ich den Inhalt, der im iframe angezeigt wird, mit 80% der Originalgröße anzeigen.

Die Lösung von Kip sollte unter Opera und Safari funktionieren, wenn Sie das CSS in Folgendes ändern:

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

Möglicherweise möchten Sie auch einen Überlauf angeben: versteckt in #frame, um Bildlaufleisten zu vermeiden.

Ich habe eine Lösung gefunden, die in IE und Firefox funktioniert (zumindest in den aktuellen Versionen). In Safari / Chrome wird die Größe des Iframes auf 75% seiner ursprünglichen Größe geändert, aber der Inhalt des Iframes wird überhaupt nicht skaliert. In Opera scheint dies nicht zu funktionieren. Das fühlt sich ein bisschen esoterisch an. Wenn es also einen besseren Weg gibt, würde ich Vorschläge begrüßen.

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

Hinweis: Ich musste das wrapElement für Firefox verwenden. Aus irgendeinem Grund wird in Firefox, wenn Sie das Objekt um 75% verkleinern, aus Layoutgründen immer noch die Originalgröße des Bildes verwendet. (Versuchen Sie, das div aus dem obigen Beispielcode zu entfernen, und Sie werden sehen, was ich meine.)

Ich habe etwas davon aus dieser Frage herausgefunden .

Nachdem ich stundenlang damit zu kämpfen hatte und versuchte, es in IE8, 9 und 10 zum Laufen zu bringen, funktionierte Folgendes für mich.

Dieses abgespeckte CSS funktioniert ab dem 07.01.2014 in FF 26, Chrome 32, Opera 18 und IE9 -11:

.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;
}

Stellen Sie für IE8 die Breite / Höhe so ein, dass sie mit dem Iframe übereinstimmt, und fügen Sie -ms-zoom zum .wrap-Container div hinzu:

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

Verwenden Sie einfach Ihre bevorzugte Methode für das Browser-Sniffing, um das entsprechende CSS bedingt einzuschließen. Siehe Gibt es eine Möglichkeit, browserspezifisches bedingtes CSS in einer * .css-Datei auszuführen? für einige Ideen.

IE7 war eine verlorene Ursache, da -ms-zoom erst in IE8 existierte.

Hier ist der aktuelle HTML-Code, mit dem ich getestet habe:

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

Ich habe gerade getestet und für mich hat keine der anderen Lösungen funktioniert. Ich habe es einfach versucht und es funktionierte perfekt auf Firefox und Chrome, genau wie ich erwartet hatte:

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

und die CSS:

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

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

Dies skaliert den gesamten Inhalt um 30%. Die Breiten- / Höhenprozentsätze müssen natürlich entsprechend angepasst werden (1 / scale_factor).

Follow-up zu der Antwort von lxs : Ich habe ein Problem festgestellt, bei dem sowohl das zoomals auch das --webkit-transformTags gleichzeitig Chrome (Version 15.0.874.15) durch einen Doppelzoom-Effekt zu verwirren scheinen. Ich war in der Lage , das Problem zu umgehen , durch den Austausch zoommit -ms-zoom(gezielten nur bei IE), Chrome verläßt Verwendung von nur das machen --webkit-transformTag, und die gelöschte Dinge.

Sie müssen den Iframe nicht mit einem zusätzlichen Tag versehen. Stellen Sie einfach sicher, dass Sie die Breite und Höhe des Iframes um den gleichen Betrag erhöhen, um den Sie den Iframe verkleinern.

zB um den Iframe-Inhalt auf 80% zu skalieren:

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

Grundsätzlich müssen Sie die Abmessungen skalieren, um die gleiche Größe des Iframes zu erhalten.

html {zoom: 0.4;}? -)

Ich dachte, ich würde teilen, was ich mir ausgedacht habe, und dabei viel von dem verwenden, was oben angegeben wurde. Ich habe Chrome nicht überprüft, aber es funktioniert in IE, Firefox und Safari, soweit ich das beurteilen kann.

Die spezifischen Offsets und der Zoomfaktor in diesem Beispiel haben zum Verkleinern und Zentrieren von zwei Websites in Iframes für Facebook-Registerkarten (810 Pixel Breite) verwendet.

Die beiden verwendeten Sites waren eine WordPress-Site und ein Ning-Netzwerk. Ich bin nicht sehr gut mit HTML, also hätte dies wahrscheinlich besser gemacht werden können, aber das Ergebnis scheint gut zu sein.

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

Wenn Sie möchten, dass der Iframe und sein Inhalt beim Ändern der Fenstergröße skaliert werden, können Sie Folgendes auf das Größenänderungsereignis des Fensters sowie auf das Ereignis zum Laden der Iframes festlegen.

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';
  };

Dadurch werden der Iframe und sein Inhalt auf 100% Breite des Wrap-Divs skaliert (oder wie viel Prozent Sie möchten). Als zusätzlichen Bonus müssen Sie das CSS des Frames nicht auf fest codierte Werte einstellen, da alle dynamisch festgelegt werden. Sie müssen sich nur darum kümmern, wie das Wrap-Div angezeigt werden soll.

Ich habe dies getestet und es funktioniert auf Chrome, IE11 und Firefox.

Ich denke, Sie können dies tun, indem Sie die gewünschte Höhe und Breite mit Javascript berechnen (über document.body.clientWidth usw.) und dann den Iframe wie folgt in Ihren HTML-Code einfügen:

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

Ich habe dies nicht in IE6 getestet, aber es scheint mit den guten zu funktionieren :)

Für diejenigen unter Ihnen, die Probleme haben, dies im IE zum Laufen zu bringen, ist es hilfreich, -ms-zoomwie unten vorgeschlagen zu verwenden und die Zoomfunktion für das #wrapdiv und nicht für die iframeID zu verwenden. Nach meiner Erfahrung würde mit der zoomFunktion, die versucht, das iframe-Div von #framezu skalieren, die iframe-Größe und nicht der darin enthaltene Inhalt skaliert (was Sie anstreben).

Sieht aus wie das. Funktioniert für mich unter IE8, Chrome und FF.

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

Dies war meine Lösung auf einer Seite mit 890px Breite

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

}

Die # wrap # frame-Lösung funktioniert einwandfrei, solange die Zahlen in #wrap #frame mal dem Skalierungsfaktor sind. Es wird nur der Teil des verkleinerten Frames angezeigt. Sie können es hier sehen, indem Sie Websites verkleinern und in eine interessante Form bringen (mit dem Woodmark-jQuery-Plugin):

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

Also wahrscheinlich nicht die beste Lösung, scheint aber OK zu funktionieren.

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

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

Offensichtlich versuchen Sie nicht, das Elternteil zu reparieren, sondern fügen dem Körper des Kindes nur den Stil "Zoom: 50%" mit etwas Javascript hinzu.

Vielleicht könnte man den Stil des "HTML" -Elements festlegen, habe das aber nicht versucht.

Wenn Ihr HTML-Code mit CSS gestaltet ist, können Sie wahrscheinlich verschiedene Stylesheets für verschiedene Größen verknüpfen.

Ich glaube nicht, dass HTML eine solche Funktionalität hat. Das einzige, was ich mir vorstellen kann, ist eine serverseitige Verarbeitung. Vielleicht können Sie einen Bild-Snapshot der Webseite erhalten, die Sie bereitstellen möchten, ihn auf dem Server skalieren und dem Client bereitstellen. Dies wäre jedoch eine nicht interaktive Seite. (Vielleicht könnte eine Imagemap den Link haben, aber immer noch.)

Eine andere Idee wäre, eine serverseitige Komponente zu haben, die den HTML-Code ändert. So ähnlich wie die Firefox 2.0-Zoomfunktion. Dies ist natürlich kein perfektes Zoomen, aber es ist besser als nichts.

Davon abgesehen habe ich keine Ideen mehr.

Wie gesagt, ich bezweifle, dass Sie es schaffen können.
Vielleicht können Sie zumindest den Text selbst skalieren, indem Sie einen Stil festlegen font-size: 80%;.
Ungetestet, nicht sicher, ob es funktioniert, und die Größe von Boxen oder Bildern wird nicht geändert.