Iframe mit fester Breite und DYNAMISCHER Höhe

Question

Ist es möglich, ein iframe mit einer festen Breite (z.B. 75%) und einer dynamischen Höhe zu verwenden? Was ich erreichen möchte, ist, dass die Seite, die in das iframe geladen wird, nicht breiter ist, als ich spezifiziert habe, aber die Höhe entsprechend dem Inhalt der Seite sein soll. Ist es eine Seite mit 5 Zeilen Text, wird das Rahmen gerade groß genug sein, um diese 5 Zeilen anzuzeigen. Laden wir ein großes Dokument mit 1000 Zeilen, wird die Iframe-Höhe automatisch angepasst.

Voraussetzungen:

• Die URL im Frame gehört zu einer anderen Domain als die des Elternelements.
• Der Code sollte auch auf mobilen Browsern funktionieren.
• Wir sollten versuchen, jQuery zu vermeiden, wenn möglich. (um das obige schneller zu machen)

Answer 1

Ich weiß, du würdest es gerne vermeiden, aber es sollte dich wirklich nicht so sehr ausbremsen, dass es eine Belastung für deine Seite darstellt. Ich habe schon viel verrücktere Dinge mit jQuery gemacht und es hat das prima gemeistert. Wenn es um "dynamisch" geht, ist es in der Regel eine sichere Wette, dass du irgendwann etwas JavaScript verwenden musst :P

$(selector)[0].scrollHeight

Was die Dynamik betrifft? Du könntest ein Intervall einrichten, um die Höhe anzupassen.

So etwas in der Art:

function setHeight(selector){ 
    var contentHeight = $(selector)[0].scrollHeight;
    $('#iframe-id').attr('height', contentHeight);
}

Dann lädst du es entweder beim Laden der Seite oder du verpackst es in ein setInterval.

Wenn es nur um das jQuery geht und du kein Problem mit JavaScript hast, dann könnte dir diese Webseite helfen http://www.mattcutts.com/blog/iframe-height-scrollbar-example/

Answer 2

Die Höhe des IFrame kann mit dem Rendering-Code der Seite oder JavaScript manipuliert werden ... aber es gibt keine Möglichkeit, dass sich das IFrame dynamisch an den Inhalt anpasst.

Der Link im Kommentar von mplungjan führt zu einem wirklich guten Beitrag zu diesem Thema.