So ändern Sie die Höhe des iframe auf der Grundlage dynamischer zusammenstzung innerhalb des iframe?

Habe ich ein iframe, dynamische Inhalte. Wenn die Antworten bestimmten Fragen, werden zusätzliche Informationen angezeigt (hidden div sichtbar wird). Ich würde gerne die Höhe des iFrames zu erweitern. Ich weiß, diese Frage wurde gebeten, hier mehrere Male, aber wie es scheint, ist es in der Regel, wenn eine andere Seite in den iframe geladen wird, nicht wenn der Inhalt geändert wird dynamisch innerhalb des iframe.

Hier ein Beispiel habe ich zusammen mit jsFiddle:

iframe: http://jsfiddle.net/B4AKc/2/

Seite: http://jsfiddle.net/PmBrd/

Irgendwelche Ideen?

Es ist immer noch ein schwieriges problem. Hier ist die beste Antwort auf SO: stackoverflow.com/questions/153152/...
Ist der Inhalt von dem iframe auf der selben domain wie die Seite, die den iframe?
Ja, gleiche domain.
gleichen Domäne? verdammt, hier ich dachte, ich war immer eine schnelle, einfache Antwort!

InformationsquelleAutor Michael | 2011-11-26

  1. 10

    Macht diese Arbeit für Sie?

    http://jsfiddle.net/PmBrd/1/

    Code: 

    var iframe = document.getElementById("ifr").contentWindow;

iframe.$(".toggle_div").bind("change", function () {
    $("#ifr").css({
        height: iframe.$("body").outerHeight()
    });
});

    Da Sie erwähnt, dass Sie in der gleichen Domäne sind, es ist nur eine Frage der etwas ähnliches mit Ihrem echten app.

    InformationsquelleAutor Esailija

  2. 4

    Überprüfen Sie diese ein.
    Sie können das iframe-Größe mit javascript selbst.

    Mit setInterval, überprüfen Sie die Fenster-Höhe jedes mal. 

    < iframe src='<YOUR_URL>' frameborder='0' scrolling='no' id='frame_id' style='overflow:hidden; width:984px;' >
</iframe>

<script language="javascript" type="text/javascript">
setInterval(function(){
    document.getElementById("frame_id").style.height = document.getElementById("frmid").contentWindow.document.body.scrollHeight + 'px';
},1000)
</script>

    Überprüfen Sie diese

    InformationsquelleAutor Eugine Joseph

  3. 1

    Esailija Antwort funktioniert gut, aber dieses ist schöner imo.

    $('#ifr').contents($(".toggle_div")).bind("change", function () {
    $("#ifr").height($("#ifr").contents().find("html").height());
});
    Funktioniert wie ein Charme.

    InformationsquelleAutor olofom

  4. 1

    vielleicht ein bisschen spät, wie alle anderen Antworten sind vom Jahr 2011 🙂 aber...
    hier ist meine Lösung. Getestet in aktuellen FF, Chrome und Safari 5.0

    $(document).ready(function(){
    $("iframe").load( function () {
        var c = (this.contentWindow || this.contentDocument);
        if (c.document) d = c.document;
        var ih = $(d).outerHeight();
        var iw = $(d).outerWidth();
        $(this).css({
            height: ih,
            width: iw
        });
    });
});

    Hoffe das hilft niemandem.

    InformationsquelleAutor ddlab

  5. 0

    Werfen Sie einen Blick auf das jQuery - postMessage plugin. Es erlaubt Ihnen, um Informationen von den untergeordneten frame zu den Eltern. Sie könnte sich ändern Sie den code in das child-frame, um die Inhalte veröffentlichen Höhe, um die Eltern über Inhalte zu ändern, die die Eltern könnten dann verwenden, um die Größe des iframe entsprechend.

    Den beiden Seiten muss auf der gleichen domain arbeiten.

    Ich hoffe, das hilft!

    InformationsquelleAutor dSquared

Schreibe einen Kommentar