Wie kann ich den Inhalt eines Iframes skalieren?

Question

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

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

Answer 1

Ich glaube nicht, dass HTML solche Funktionalität hat. Das Einzige, was ich mir vorstellen kann, wäre eine serverseitige Verarbeitung. Vielleicht könnten Sie einen Image-Snapshot der Webseite erstellen, die Sie bereitstellen möchten, diese auf dem Server skalieren und dem Client bereitstellen. Dies wäre jedoch eine nicht interaktive Seite. (vielleicht könnte eine Imagemap die Verbindung haben, aber immer noch.)

Eine andere Idee wäre, eine serverseitige Komponente zu haben, die den HTML ändern würde. Sort wie die firefox 2.0 Zoom-Funktion. Das ist natürlich kein perfektes Zoomen, aber ist besser als nichts.

Ansonsten habe ich keine Ideen mehr.

Answer 2

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

Answer 3

html {Zoom: 0,4;} -)

Answer 4

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

Answer 5

Ich glaube, Sie können dies tun, indem die Berechnung der Höhe und Breite Sie mit Javascript wollen (via document.body.clientWidth etc.) und dann den iframe in Ihre HTML wie diese Injektion:

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

I didn t test das in IE6 aber es scheint mit den guten zu arbeiten :)

Answer 6

Ich fand eine Lösung, die in IE und Firefox funktioniert (zumindest auf den aktuellen Versionen). In Safari/Chrome wird der Iframe auf 75% seiner ursprünglichen Größe geändert, aber der Inhalt innerhalb des Iframes wird überhaupt nicht skaliert. In Opera scheint das nicht zu funktionieren. Das fühlt sich ein bisschen esoterisch an, also wenn es 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 hatte das wrap Element für Firefox zu verwenden. Aus irgendeinem Grund verwendet Firefox in Firefox, wenn Sie das Objekt um 75% verkleinern, immer noch die ursprüngliche Größe des Bildes aus Layoutgründen. (Versuchen Sie, das Div aus dem obigen Beispielcode zu entfernen, und Sie werden sehen, was ich meine.)

Ich fand etwas davon von this question.

Answer 7

Kip's solution sollte auf Opera und Safari, wenn Sie das CSS zu ä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> 

Vielleicht wollen Sie auch einen Überlauf spezifizieren: hidden auf #frame Bildlaufleisten zu verhindern.

Answer 8

Followup zu lxs's answer: Ich habe ein Problem bemerkt, wo zur gleichen Zeit sowohl die zoom und --webkit-transform-Tags, die scheint Chrome (Version 15.0.874.15), indem Sie einen Doppel Zoom Art Wirkung zu verwechseln. Ich konnte das Problem umgehen, indem ich durch -ms-zoom (nur auf IE gerichtet) ersetzt, so dass Chrome nur das Tag --webkit-transform verwendet, und das hat alles geklärt.

Answer 9

Für diejenigen von Ihnen, die Probleme haben, dies in IE zu arbeiten, ist es hilfreich, -ms-zoom wie unten vorgeschlagen zu verwenden und verwenden Sie die Zoomfunktion auf der #wrap Div, nicht die iframe ID. Meiner Erfahrung nach, mit der Funktion, die versucht, das iframe-div von #frame zu skalieren, würde es die iframe-Größe und nicht den Inhalt darin skalieren (wozu du gehst).

Sieht so aus. Funktioniert für mich auf IE8, Chrome und FF.

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

Answer 10

Ich dachte, ich würde teilen, was ich kam, mit viel von dem, 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 funktionierten zum Schrumpfen und Zentrieren von zwei Websites in Iframes für Facebook-Registerkarten (810 Pixel Breite).

Die zwei verwendeten Sites waren eine Wordpress-Site und ein Ning-Netzwerk. Ich bin nicht sehr gut mit HTML, also könnte dies wahrscheinlich besser gemacht worden sein, aber das Ergebnis scheint gut.

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

Answer 11

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

z.B. den iframe Inhalt auf 80% 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 die gleiche Größe iframe zu erhalten müssen Sie die Dimensionen skalieren.

Answer 12

Die Lösung #wrap #frame funktioniert einwandfrei, solange die Zahlen in #wrap #frame mal der Skalierungsfaktor ist. Es zeigt nur den Teil des verkleinerten Rahmens. Sie können es hier sehen Websites Verkleinerung und in eine pinterest wie Form (mit dem Woodmark jQuery-Plugin) setzen:

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

Answer 13

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; 

} 

Answer 14

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

Diese abgespeckte CSS funktioniert in FF 26, Chrome 32, Opera 18 und IE9 -11 ab 2014.01.07:

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

Für IE8, stellen Sie die Breite/Höhe der passen iframe und -ms-Zoom auf den .wrap div-Container hinzu:

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

einfach Ihre bevorzugte Methode für Browser Sniffing bedingt die entsprechende CSS gehören zu, Is there a way to do browser specific conditional CSS inside a *.css file? für einige Ideen sehen.

IE7 war eine verlorene Ursache, da -ms-zoom nicht vor IE8 existierte.

Hier ist der eigentliche HTML ich getestet mit:

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

Answer 15

Wenn Sie die Iframe und seinen Inhalt skaliert werden soll, wenn das Fenster ändert die Größe, können Sie das folgende Fenster des Resize-Ereignis gesetzt, wie sowie das Iframes-Onload-Ereignis.

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

Dies wird den iframe und deren Inhalt Skala auf 100% Breite der Umhüllung div (oder was auch immer Sie wollen Prozent) machen. Als zusätzlichen Bonus müssen Sie die css des Frames nicht auf hart codierte Werte setzen, da sie alle dynamisch gesetzt 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.

Answer 16

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

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

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

versucht offensichtlich nicht die Eltern zu beheben, das Hinzufügen nur den „Zoom: 50%“ Stils auf den Körper des Kindes mit einem wenig Javascript.

Vielleicht könnte den Stil des "HTML" -Elementes einstellen, aber das habe ich nicht versucht.

Answer 17

Ich stelle fest, dass die Skalierung automatisch erfolgt, wenn ich die Breite des Containers (Eltern-DIV) auf der Zielseite nicht in Pixeln, sondern nur prozentual definiere. Es passiert automatisch.

1. In meinem Fall definiere ich für exmpl. 480px width für div wobei iframe gesetzt wird. 2.Ich setze 100% Breite für iframe. 3. Ich habe 250% Breite für das Eltern-Div auf der Zielseite eingestellt (5 Bilder x 50% der Bildschirmbreite).

Meine Absicht ist es, 2 Bilder (in der Breite) im Rahmen zu zeigen, und genau das passiert, in jedem Fall der Rahmenbreite.

Warum funktioniert es nur in Prozent?

Answer 18

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

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

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

Diese Skalen alle Inhalte um 30%. Die Prozentsätze für Breite und Höhe müssen natürlich entsprechend angepasst werden (1/scale_factor).