it-swarm.com.de

Passen Sie die Größe des Inhalts externer Websites an die iFrame-Breite an

Ich habe eine Webseite mit 2 iFrames. Beide haben eine feste Breite und Höhe. Ich lade externe Websites in sie. Wie kann ich die Breite dieser externen Websites ändern, um sie an den iFrame anzupassen (wie dies bei mobilen Browsern durch Ändern des Ansichtsfensters der Fall ist)?

36
Tahin Rahman

Sie können Ihrem iframe eine bestimmte Breite und Höhe zuweisen (diese können beispielsweise Ihren Fensterabmessungen entsprechen) und dann eine Skalentransformation darauf anwenden. Der Skalierungswert ist das Verhältnis zwischen Ihrer Fensterbreite und der Abmessung, die Sie für Ihren Iframe festlegen möchten.

Z.B.

<iframe width="1024" height="768" src="http://www.bbc.com" style="-webkit-transform:scale(0.5);-moz-transform-scale(0.5);"></iframe>
70
Luca

Tipp für 1 Website zur Größenänderung der Höhe. Sie können jedoch zu 2 Websites wechseln.

Hier ist mein Code zum Ändern der Größe eines Iframes mit einer externen Website. Sie müssen einen Code in die übergeordnete Seite (mit Iframe-Code) und auch in die externe Website einfügen. Dies funktioniert also nicht, wenn Sie keinen Zugriff zum Bearbeiten der externen Website haben.

  • lokale (iframe) Seite: Fügen Sie einfach einen Code ein
  • entfernte (externe) Seite: Sie benötigen ein "body onload" und ein "div", das alle Inhalte enthält. Und Körper muss auf "Rand: 0" gestylt werden

Lokal:

<IFRAME STYLE="width:100%;height:1px" SRC="http://www.remote-site.com/" FRAMEBORDER="no" BORDER="0" SCROLLING="no" ID="estframe"></IFRAME>

<SCRIPT>
var eventMethod = window.addEventListener ? "addEventListener" : "attachEvent";
var eventer = window[eventMethod];
var messageEvent = eventMethod == "attachEvent" ? "onmessage" : "message";
eventer(messageEvent,function(e) {
  if (e.data.substring(0,3)=='frm') document.getElementById('estframe').style.height = e.data.substring(3) + 'px';
},false);
</SCRIPT>

Sie benötigen dieses "frm" -Präfix, um Probleme mit anderen eingebetteten Codes wie Twitter oder Facebook-Plugins zu vermeiden. Wenn Sie eine einfache Seite haben, können Sie die Präfixe "if" und "frm" auf beiden Seiten (Skript und Onload) entfernen.

Fernbedienung:

Sie benötigen jQuery, um eine "echte" Seitenhöhe zu erreichen. Ich kann nicht verstehen, wie man mit reinem JavaScript umgeht, da Sie Probleme haben, wenn Sie die Höhe mit body.scrollHeight oder einem ähnlichen Befehl verkleinern (von höherer zu niedrigerer Höhe). Aus irgendeinem Grund wird immer die größte Höhe zurückgegeben (vordimensioniert).

<BODY onload="parent.postMessage('frm'+$('#master').height(),'*')" STYLE="margin:0">
<SCRIPT SRC="path-to-jquery/jquery.min.js"></SCRIPT>
<DIV ID="master">
your content
</DIV>

Daher hat die übergeordnete Seite (iframe) eine Standardhöhe von 1px. Das Skript fügt ein "Warten auf Nachricht/Ereignis" aus dem iframe ein. Wenn eine Nachricht (Post-Nachricht) empfangen wird und die ersten 3 Zeichen "frm" lauten (um das erwähnte Problem zu vermeiden), wird die Nummer von der vierten Position abgerufen und die iframe-Höhe (Stil) einschließlich der Einheit "px" festgelegt.

Die externe Site (im iframe geladen) "sendet eine Nachricht" mit dem "frm" und der Höhe des Hauptteils (in diesem Fall id "master") an das übergeordnete Element (opener). Das "*" in postmessage bedeutet "jede Quelle".

Hoffe das hilft. Entschuldigung für mein Englisch.

2
Arvy