webentwicklung-frage-antwort-db.com.de

Wie kann ich den Inhalt eines iframe skalieren?

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

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

201
John Griffiths

Kips Lösung sollte auf 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 Überlauf angeben: in #frame ausgeblendet, um Bildlaufleisten zu verhindern.

201
lxs

Ich habe eine Lösung gefunden, die in IE und Firefox funktioniert (zumindest in den aktuellen Versionen). Bei Safari/Chrome wird der iframe auf 75% seiner ursprünglichen Größe verkleinert, der Inhalt des iframes wird jedoch nicht skaliert. In Opera scheint das nicht zu funktionieren. Das fühlt sich ein bisschen esoterisch an. Wenn es einen besseren Weg gibt, würde ich mich über Vorschläge freuen.

<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 wrap-Element für Firefox verwenden. Wenn Sie das Objekt in Firefox um 75% verkleinern, verwendet es aus Gründen des Layouts immer noch die Originalgröße des Bildes. (Entfernen Sie das div aus dem obigen Beispielcode, und Sie werden sehen, was ich meine.)

Ich habe etwas davon aus dieser Frage gefunden.

51
Kip

Nachdem ich mich stundenlang damit beschäftigt hatte, es in IE8, 9 und 10 zum Laufen zu bringen, funktionierte es bei mir.

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 dem .wrap-Container div -ms-zoom hinzu:

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

Verwenden Sie einfach Ihre bevorzugte Methode zum Browserschnüffeln, um das entsprechende CSS bedingt hinzuzufügen, siehe Gibt es eine Möglichkeit, browserspezifisches bedingtes CSS in einer * .css-Datei zu erstellen? für ein paar Ideen.

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

Hier ist der eigentliche 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/

27
Eric Sassaman

Folge der Antwort auf lxs : Ich habe ein Problem festgestellt, bei dem die gleichzeitige Verwendung der beiden Variablen zoom und --webkit-transform Chrome (Version 15.0.874.15) durch einen Doppelzoom-Effekt zu verwechseln scheint. Ich konnte das Problem umgehen, indem ich zoom durch -ms-zoom (nur für IE) ersetzte, Chrome jedoch nur das --webkit-transform-Tag verwenden ließ.

9
r3cgm

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

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

Um dieselbe Größe zu erhalten, müssen Sie die Abmessungen skalieren.

9

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

Die Besonderheiten des Offsets und des Zoomfaktors in diesem Beispiel funktionierten zum Verkleinern und Zentrieren von zwei Websites in iframes für Facebook-Registerkarten (Breite 810 Pixel).

Die zwei verwendeten Sites waren eine Wordpress-Site und ein Netzwerk von Ning. Ich bin nicht sehr gut mit HTML, also hätte man das wahrscheinlich besser machen 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>
7
Jon Fergus

html {zoom: 0.4;}? -)

6
roenving

Wenn Sie möchten, dass der iframe und sein Inhalt bei der Größenänderung des Fensters skaliert werden, können Sie Folgendes auf das Größenänderungsereignis des Fensters sowie auf das iframes-Ereignis onload setzen.

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 wird der iframe und sein Inhalt auf 100% Breite des Wrap-div skaliert (oder wie viel Prozent Sie möchten). Als zusätzlichen Bonus müssen Sie die CSS des Frames nicht auf hart codierte Werte setzen, da sie alle dynamisch festgelegt werden. Sie müssen sich lediglich Gedanken darüber machen, wie das Wrap div angezeigt werden soll. 

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

4
user3298597

Ich denke, Sie können dies tun, indem Sie die gewünschte Höhe und Breite mit Javascript (über document.body.clientWidth usw.) berechnen 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 das nicht in IE6 getestet, aber es scheint mit den Guten zu funktionieren :)

4
Eric Wendelin

Dies war meine Lösung auf einer Seite mit einer Breite von 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; 

}
3
Mathias Asberg

Für diejenigen, die Probleme damit haben, dies im IE zu erreichen, ist es hilfreich, -ms-zoom wie unten vorgeschlagen zu verwenden und die Zoomfunktion für #wrap div zu verwenden, nicht die iframe-ID. Meiner Erfahrung nach würde die zoom-Funktion, die versucht, das iframe -Div von #frame zu skalieren, die iframe-Größe und nicht den Inhalt darin skalieren (was Sie wollen). 

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

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

Ich habe gerade getestet und für mich funktionierte keine der anderen Lösungen ... Ich habe es einfach ausprobiert und es funktionierte perfekt mit Firefox und Chrome, genau 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;
}

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

3
MrP01

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 übergeordnete Element zu reparieren, indem Sie einfach den Stil "Zoom: 50%" mit etwas Javascript zum Körper des Kindes hinzufügen.

Vielleicht konnte der Stil des "HTML" -Elements festgelegt werden, was aber nicht versucht wurde.

2
Graham

Die #wrap #frame-Lösung funktioniert einwandfrei, solange die Zahlen in #wrap #frame mal dem Skalierungsfaktor entsprechen. Es zeigt nur den Teil des verkleinerten Frames. Sie können es hier sehen, wenn Sie Websites verkleinern und in eine interessierende Form bringen (mit dem woodmark jQuery-Plugin):

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

2

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

1
Jon

Ich glaube nicht, dass HTML eine solche Funktionalität hat. Das einzige, was ich mir vorstellen kann, ist die serverseitige Verarbeitung. Vielleicht können Sie einen Bild-Snapshot der gewünschten Webseite erhalten, sie 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, die den HTML-Code verändern würde. Wie die Firefox 2.0 Zoom-Funktion. Dies ist natürlich kein perfektes Zoomen, aber es ist besser als nichts.

Ansonsten habe ich keine Ideen.

0

Ich stelle fest, dass die Skalierung automatisch erfolgt, wenn ich die Breite des Containers (übergeordnetes DIV) in der Zielseite nicht in Pixeln, sondern in und nur in Prozent festlege.

1.In meinem Fall definiere ich für exmpl. 480px Breite für div, wo iframe gesetzt wird. 2.Ich setze 100% Breite für iframe . 3. Ich habe eine Breite von 250% für das übergeordnete Div auf der Zielseite festgelegt (5 Bilder x 50% der Bildschirmbreite).

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

Warum funktioniert es nur in Prozent?

0
Toni Risteski

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

0
PhiLho