Dynamische Größenanpassung eines Iframes

Question

Ich kann sehen, dass diese Frage mehrmals gestellt wurde, aber keine der vorgeschlagenen Lösungen scheint für die Seite, die ich erstelle, zu funktionieren, also öffne ich den Thread erneut. Ich versuche, einen Iframe basierend auf der Höhe seines Inhalts zu bemessen. Sowohl die Seite, die den iframe enthält, als auch deren Quellseite sind in derselben Domäne vorhanden.

I haben die vorgeschlagenen Lösungen in jedem der folgenden Threads versucht:

• Resize iframe height according to content height in it
• Resizing an iframe based on content

Ich glaube, dass die oben genannten Lösungen sind wegen, wenn der Bezug auf Körper Arbeits .clientHeight erstellt, der Browser hat die Höhe des Dokuments nicht ermittelt.

Hier ist der Code ich verwende:

var ifmBlue = document.getElementById("ifmBlue"); 
    ifmBlue.onload = resizeIframe; 

    function resizeIframe() 
    { 
     var ifmBlue = document.getElementById("ifmBluePill"); 
     var ifmDiv = ifmBlue.contentDocument.getElementById("main"); 
     var height = ifmDiv.clientHeight; 
     ifmBlue.style.height = (ifmBlue.contentDocument.body.scrollHeight || ifmBlue.contentDocument.body.offsetHeight || ifmBlue.contentDocument.body.parentNode.clientHeight || height || 500) + 5 + 'px'; 
    } 

Wenn ich das Skript mit Feuer debuggen, ist der Client Höhe des Haupt divs iframe.contentDocument 0. Zusätzlich body.offsetHieght, & Körper. scrollHeight sind 0. Nachdem ich das Skript beendet habe und das DOM des HTML-Iframe-Elements (mit Fire Debug) untersucht habe, kann ich sehen, dass clientHeight des Körpers 456 und clientHeight des inneren Teils 742 ist Diese Werte sind noch nicht festgelegt, wenn iframe.onload ausgelöst wird. Daher habe ich den Code in einem der obigen Threads in den body.onload-Ereignishandler der Quellseite des iframes verschoben. Diese Lösung hat auch nicht funktioniert.

Jede Hilfe, die Sie zur Verfügung stellen können, wird sehr geschätzt.

Danke,

CJ

Answer 1

DynamicDrive hat such a script, was ich denke, tut, was Sie verlangen.

Es gibt jetzt auch eine newer version.

---

2011 Update:

Ich würde mit AJAX über so etwas wie diese stark empfehlen, vor allem, dass nur eine dynamisch Ändern der Größe iframe funktioniert über die gleiche Domäne betrachten.

Trotzdem ist es ein bisschen iffy, wenn Sie also absolut AJAX über Standard-Laden der Seite verwenden müssen, wirklich Sie, wirklich sollten Dinge verwenden, wie history.pushState (und Standard-Laden der Seite für Browser als Ausweich haben, die nicht zu tun unterstütze es). Es gibt ein jQuery-Plugin, das dieses Zeug für Sie handhabt, geschrieben von einem GitHubber, genannt pjax, das sie nur für Repo-Navigation verwenden.

Answer 2

der Handler bewegt? vielleicht sollten Sie die Funktion auch auf den inneren Rahmen verschieben, so dass Sie beim Erfassen von Höhenwerten direkt auf den Körper und nicht auf das Rahmenobjekt verweisen ... dann rufen Sie eine Elternhöhe auf

einen weiteren Trick, Anruffunktion nach setTimeout von 10 msec

ich erinnere mich, einmal das Problem hatte, aber ich verwendet IE getBoundingClientRect() Höhe des Inhalts zu erhalten, mozilla developer Center für etwas ähnliches zu überprüfen, dies ist nur ein Hinweis, ich habe die Forschung es nicht

auf einem anderen Hinweis, was ist ifmBluePill? Ist es der Iframe? oder ein div drin? Warum referenzieren Sie "contentDocument" eines div?

Answer 3

By the way, verbessert Dynamic ihr Skript immer, auch wenn die iframe Inhalte ändern, um die Größe: http://www.dynamicdrive.com/dynamicindex17/iframessi2.htm

Von ihrer Seite:

II des ursprünglichen Iframe SSI Skript Dies ist die Version, die wie das Original-Skript können Sie nahtlos externen Inhalt auf Ihrer Seite über ein IFRAME anzeigen. Es tut dies, indem dynamisch die IFRAME Ändern der Größe die Höhe der Seite darin enthaltenen sein, alle möglichen IFRAME Scrollbalken eliminiert erscheinen, während eng die gesamte äußere Inhalt zeigt. Denken Sie daran, wie SSI (Server Seite enthält) mit DHTML emuliert! Dieses Skript funktioniert in IE5 + und NS6 +, und für andere Browser unterstützt die Option, entweder den fraglichen iframe vollständig zu verbergen oder mit seiner Standardhöhe anzuzeigen.

Nun unterscheidet sich dieses Skript aus dem Original, dass Sie zusätzliche Dokumente laden * in den IFRAME , selbst nachdem die Seite geladen wurde, und die IFRAME wird seine Höhe dynamisch anpassen, das neue Dokument passen. Verwenden Sie also dieses Skript, wenn Sie nicht nur externen Inhalt über das IFRAME-Tag anzeigen, sondern beabsichtigen, diesen Inhalt nach dem Laden der Seite zu ändern.