Home > HTML, JavaScript > IFrame: Höhe automatisch dem Inhalt anpassen

IFrame: Höhe automatisch dem Inhalt anpassen

Bei externen Diensten, zum Beispiel beim Einbinden von Content in die eigene Seite, werden sehr häufig IFrames eingesetzt. Bei statischen Einzelseiten ist die Anpassung der Höhe an die eigene Seite kein Problem. Einmal die Höhe mit dem Attribut „height“ und der richtigen Anzahl der Pixel angepasst, wird der gesamte body Bereich in die eigene Webseite eingebunden. Wenn jedoch innerhalb des IFrames auf andere Inhalte verlinkt wird, die im selben Frame geöffnet werden, dann kommt es vor, dass der Inhalt der Seite im Fenster größer ist und man als Benutzer scrollen muss.

Dadurch wird, sofern im CSS nicht explizit deaktiviert, eine Scrollleiste eingeblendet, die im Browser das Scrollen zum unteren Contentbereich erlaubt. Besonders bei komplexen Scripten, wie Buchungsmasken und anderen Buchungsformularen, macht es besonders viel Sinn, die Höhe automatisch dem Inhalt des IFrames anzupassen, damit der Benutzer möglichst wenig scrollen braucht sowie nicht abgeschreckt wird, weil das Buchungsformular von einem externen Anbieter kommt. Es kommt sehr häufig vor, dass Verbraucher und erfahrene Internetnutzer bei Webseiten durch das Erscheinen einer Scrollleiste skeptisch werden und sich nicht anmelden oder das Produkt bestellen, obwohl der Anbieter seriös ist und keine andere Möglichkeit zum Anbieten seiner Leistung hat als das IFrame.

Arbeitet man mit IFrames und hat auch Zugriff auf den Inhalt der externen Seite bzw. kann mit dem Anbieter kooperieren, dann gibt es eine einfache Lösung: Man führt auf der IFrame-Inhaltsseite ein Script aus, dass die IFrame-Höhe auf der Elternseite (parent) anpasst.

Die HTML-Seite, die den Content im IFrame darstellt, hat dann folgendes Script unter onload definiert:

Ein simples Script mit großem Effekt: Es setzt die IFramehöhe anhand des globalen div-Containers, welcher den Content enthält. Die eigentliche Webseite, die das IFrame einbindet hat dann folgenden Code. Wichtig ist die ID, die unter onload im Javascript im IFrame Tag angegeben wurde:

Das IFrame ist also immer so groß wie im der Inhalt des IFrames. Viel Spaß mit diesem nützlichen Script 🙂

  1. A.Hofmann
    25. Juli 2012, 13:04 | #1

    Leider bringt Firefox die Meldung

    Error: Permission denid to access property ‚document‘

    und der IE bringt gleich ein ganzes Fehlerfenster auch mit ‚Zugriff verweigert‘.

    Was allerdings rechtetechnisch nicht ganz von der Hand zu weisen ist.

    Grüße!

  2. Pieter
    6. Oktober 2012, 00:41 | #2

    Hallo wollte mir das Script in eine Seite einbauen, aber irgendwie gibt es bei mir im Firefox Probleme. Das Iframe hab ich in einem Jquery Accordion drin sitzen. Im Safari ist alles gut, nur im FF zeigt er mir eine leere Fläche… Der FF bekommt anscheint nicht die style=“height:….“ den dort steht immer null. Wenn ich diesen Wert im Firebug mal zbs auf 600 setzte, dann zeigt er mir den inhalt :-/

    Es scheint am jquery Accordion zu liegen, denn wenn ich mal eine extra html datei machen mit dem Irame drin, dann funktioniert es ;-/

    Irgend eine Idee woran das liegen kann und wie man es auch im accordion zum laufen bringt?
    Danke.

  1. Bisher keine Trackbacks