Marcel: Iframe mit dynamischer Höhe

Hallo!

Ich möchte eine Seite mit dynamischer Höhe per Iframe einbinden. Je nachdem welche Kriterien man wählt wird eine Entsprechende Liste mit Treffern angezeigt. Diese Liste kann von nur einem einzigen Eintrag bis zu 50, 60 Einträge sein. Es funktioniert soweit alles wie gewünscht, nur hat der Iframe eben Scrollbalken und das ist, gelinde gesagt, nicht sehr hübsch.

Ich habe schon diverse Möglichkeiten mit Javascript und auch mit CSS ausprobiert und auch von "seamless" (was es ja nicht (mehr) gibt) gelesen. Die Javascript Lösungen habe nicht wirklich funktioniert und bei der CSS Lösung muss man ein Seitenverhältnis angeben, was ja nicht geht wegen nicht im Vorraus feststehender Trefferanzahl.

Gibt es überhaupt eine Möglichkeit und wenn ja, wie kann man das umsetzen?

Vielen Dank vorab!

Grüße Marcel

akzeptierte Antworten

  1. Die Lösung ist: Kein Iframe,

    Variante 1:

    statt dessen die Inhalte mit einem XMLHttpRequest abholen und in einen div einbauen. (siehe Codebeispiel)

    Variante2:

    Seite komplett auf dem Server bauen → PHP, …

    1. Hallo Regina,

      danke für den Tipp. Das Code Beispiel von Wiki habe ich eingebaut und das scheint zu funktionieren.

      Nur damit muss ich erst mal beschäftigen! Habe nämlich keine Ahnung was dahin gehört, wenn man kein einfaches alert() haben möchte sondern die Seite angezeigt werden soll.

      Oder hast du vielleicht dafür auch noch einen Stückchen Code oder einen Link?

      Nochmals vielen Dank!

      Gruß Marcel

      1. Hallo,

        Das Code Beispiel von Wiki[pedia] habe ich eingebaut und das scheint zu funktionieren.

        Oder hast du vielleicht dafür auch noch einen Stückchen Code oder einen Link?

        Vielleicht ist das SelfWiki etwas ausführlicher?

        Gruß
        Kalk

      2. Habe nämlich keine Ahnung was dahin gehört, wenn man kein einfaches alert() haben möchte sondern die Seite angezeigt werden soll.

        Das ist kinderleicht. Du baust in die Webseite einen <div> mit einer eindeutigen id ein:

        <div id="daten"></div>
        

        Diesen kannst Du auch mit css behübschen. Statt wie bisher den Text mit alert(text) auszugeben beamst Du ihn in den div:

        document.getElementById("daten").innerHTML=text;
        

        Fertig. Naja. Fast. Wenn das Zeug von fremden Servern kommt würde ich das nur machen wenn mein Vertrauen in den Betreiber ein extremes wäre. Genau genommen hätte ich da nur bei einem einzigen keinerlei Bedenken.

  2. Aloha ;)

    Gibt es überhaupt eine Möglichkeit und wenn ja, wie kann man das umsetzen?

    Sofern der Iframe von derselben Domain geladen wird, d.h. falls die Same-Origin-Policy nicht widerspricht, kannst du per JavaScript die Höhe der im iframe geladenen Seite auslesen und die Höhe des iframe entsprechend dynamisch setzen. Allerdings wird wohl in den seltensten Fällen ein iframe von der selben Domain geladen werden, demnach ist dieser Tipp oft wertlos.

    Ich wollte das auch nur erwähnt wissen; die sinnvollste Lösung hat dir unsere Jörg-Regina ja schon genannt.

    Grüße,

    RIDER

    --
    Camping_RIDER a.k.a. Riders Flame a.k.a. Janosch Zoller
    # Twitter # Steam # YouTube # Self-Wiki # Selfcode: sh:) fo:) ch:| rl:) br:^ n4:? ie:% mo:| va:) js:) de:> zu:} fl:( ss:) ls:[
    1. Hallo Camping_RIDER,

      vielen Dank für deine Antwort.

      Aber wie du schon vermutet hast, die Seite die eingebunden werden soll, ist nicht lokal von eigenen Server, sondern von einem anderen Server.

      Trotzdem ein Dankeschön von mir für den Tipp!

      Gruß Marcel!

      1. Hallo,

        Aber wie du schon vermutet hast, die Seite die eingebunden werden soll, ist nicht lokal von eigenen Server, sondern von einem anderen Server.

        dann wird ein XMLHttpRequest aber auch nicht zwingend funktionieren, Stichwort „CORS (Cross-Origin Resource Sharing)“.

        Gruß
        Jürgen