Größenänderung eines iframe basierend auf dem Inhalt

Question

Ich arbeite an einer iGoogle-ähnlichen Anwendung. Inhalte aus anderen Anwendungen (auf anderen Domains) werden über iframes angezeigt.

Wie kann ich die Größe der iframes an die Höhe des Inhalts der iframes anpassen?

Ich habe versucht, das von Google verwendete Javascript zu entschlüsseln, aber es ist verschlüsselt, und die Suche im Internet war bisher erfolglos.

Aktualisierung: Bitte beachten Sie, dass die Inhalte von anderen Domains geladen werden, so dass die Politik der gleichen Herkunft gilt.

Answer 1

Ist vielleicht ein bisschen spät, da alle anderen Antworten schon älter sind :-) aber... hier ist meine Lösung. Getestet im aktuellen FF, Chrome und Safari 5.0.

css:

iframe {border:0; overflow:hidden;}

javascript:

$(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
        });
    });
});

Ich hoffe, das hilft jedem.

Answer 2

Wenn Sie die Kontrolle über den Iframe-Inhalt haben, empfehle ich dringend die Verwendung von

ResizeObserver

Fügen Sie einfach Folgendes am Ende von srcdoc Attribut von iframe , Flucht falls erforderlich.

<script type="text/javascript">
var ro = new ResizeObserver(entries => {
  for (let entry of entries) {
    const cr = entry.contentRect;
    // console.log(window.frameElement);
    window.frameElement.style.height =cr.height +30+ "px";
  }
});

ro.observe(document.body);
</script>

Answer 3

Diese Antwort gilt nur für Websites, die Bootstrap verwenden. Die responsive Einbettungsfunktion von Bootstrap erledigt diese Aufgabe. Sie basiert auf der Breite (nicht der Höhe) des Inhalts.

<!-- 16:9 aspect ratio -->
<div class="embed-responsive embed-responsive-16by9">
  <iframe class="embed-responsive-item" src="http://www.youtube.com/embed/WsFWhL4Y84Y"></iframe>
</div>

jsfiddle: http://jsfiddle.net/00qggsjj/2/

http://getbootstrap.com/components/#responsive-embed

Answer 4

Hier ist eine einfache Lösung, bei der ein dynamisch generiertes Stylesheet verwendet wird, das vom selben Server wie der iframe-Inhalt bereitgestellt wird. Das Stylesheet "weiß" einfach, was sich im iframe befindet, und kennt die Abmessungen, die für die Gestaltung des iframe zu verwenden sind. Auf diese Weise lassen sich die gleichen Beschränkungen der Herkunftsrichtlinie umgehen.

http://www.8degrees.co.nz/2010/06/09/dynamically-resize-an-iframe-depending-on-its-content/

Der mitgelieferte iframe-Code würde also ein begleitendes Stylesheet haben, etwa so...

<link href="http://your.site/path/to/css?contents_id=1234&dom_id=iframe_widget" rel="stylesheet" type="text/css" /> <iframe id="iframe_widget" src="http://your.site/path/to/content?content_id=1234" frameborder="0" width="100%" scrolling="no"></iframe>

Dazu muss die serverseitige Logik in der Lage sein, die Abmessungen des gerenderten Inhalts des iframe zu berechnen.

Answer 5

Ich implementiere die Frame-in-Frame-Lösung von ConroyP, um eine Lösung zu ersetzen, die auf der Einstellung von document.domain basiert, aber ich habe festgestellt, dass es ziemlich schwierig ist, die Höhe des Iframe-Inhalts in verschiedenen Browsern korrekt zu bestimmen (ich teste gerade mit FF11, Ch17 und IE9).

ConroyP verwendet:

var height = document.body.scrollHeight;

Das funktioniert aber nur beim ersten Laden der Seite. Mein iframe hat dynamischen Inhalt und ich muss die Größe des iframe auf bestimmte Ereignisse zu ändern.

Am Ende habe ich verschiedene JS-Eigenschaften für die verschiedenen Browser verwendet.

function getDim () {
    var body = document.body,
        html = document.documentElement;

    var bc = body.clientHeight;
    var bo = body.offsetHeight;
    var bs = body.scrollHeight;
    var hc = html.clientHeight;
    var ho = html.offsetHeight;
    var hs = html.scrollHeight;

    var h = Math.max(bc, bo, bs, hc, hs, ho);

    var bd = getBrowserData();

    // Select height property to use depending on browser
    if (bd.isGecko) {
        // FF 11
        h = hc;
    } else if (bd.isChrome) {
        // CH 17
        h = hc;
    } else if (bd.isIE) {
        // IE 9
        h = bs;
    }

    return h;
}

getBrowserData() ist eine Browser-Erkennungsfunktion, die von Ext Core's http://docs.sencha.com/core/source/Ext.html#method-Ext-apply

Das hat bei FF und IE gut funktioniert, aber dann gab es Probleme mit Chrome. Eines davon war ein Timing-Problem, anscheinend braucht Chrome eine Weile, um die Höhe des iframe zu ermitteln/festzustellen. Außerdem gab Chrome die Höhe des Inhalts im iframe nicht korrekt wieder, wenn der iframe höher war als der Inhalt. Dies würde nicht mit dynamischen Inhalten funktionieren, wenn die Höhe reduziert wird.

Um dies zu lösen, setze ich den iframe immer auf eine niedrige Höhe, bevor ich die Höhe des Inhalts ermittle und dann die iframe-Höhe auf den richtigen Wert setze.

function resize () {
    // Reset the iframes height to a low value.
    // Otherwise Chrome won't detect the content height of the iframe.
    setIframeHeight(150);

    // Delay getting the dimensions because Chrome needs
    // a few moments to get the correct height.
    setTimeout("getDimAndResize()", 100);
}

Der Code ist nicht optimiert, er stammt aus meinen Entwicklungstests :)

Ich hoffe, das ist für jemanden hilfreich!