jquery erhält beim Laden die Höhe des iframe-Inhalts

Die weniger komplizierte Antwort lautet .contents(), um an den iframe zu gelangen. Interessanterweise gibt es jedoch einen anderen Wert zurück als ich, wenn ich den Code in meiner ursprünglichen Antwort verwende, aufgrund der Polsterung des Körpers, glaube ich. 

$('iframe').contents().height() + 'is the height'

So habe ich es für die domänenübergreifende Kommunikation gemacht. Ich befürchte, das ist vielleicht unnötig kompliziert. Zuerst würde ich jQuery in das iFrame-Dokument einfügen. Dies verbraucht zwar mehr Speicher, erhöht jedoch nicht die Ladezeit, da das Skript nur einmal geladen werden muss. 

Verwenden Sie die jQuery des iFrame, um die Körpergröße Ihres iFrames so früh wie möglich zu messen (onDOMReady), und stellen Sie dann den URL-Hash auf diese Höhe ein. Fügen Sie dem iFrame-Tag im übergeordneten Dokument ein onload -Ereignis hinzu, das die Position des iframe überprüft und den gewünschten Wert extrahiert. Da onDOMReady immer vor dem Ladeereignis des Dokuments auftritt, können Sie ziemlich sicher sein, dass der Wert korrekt kommuniziert wird, ohne dass die Racebedingung die Dinge kompliziert.

Mit anderen Worten:

... in der Help.php:

var getDocumentHeight = function() {
    if (location.hash === '') { // EDIT: this should prevent the retriggering of onDOMReady
        location.hash = $('body').height(); 
        // at this point the document address will be something like help.php#1552
    }
};
$(getDocumentHeight);

... und im übergeordneten Dokument:

var getIFrameHeight = function() {
    var iFrame = $('iframe')[0]; // this will return the DOM element
    var strHash = iFrame.contentDocument.location.hash;
    alert(strHash); // will return something like '#1552'
};
$('iframe').bind('load', getIFrameHeight );

Ich habe folgendes gefunden, um auf Chrome, Firefox und IE11 zu funktionieren:

$('iframe').load(function () {
    $('iframe').height($('iframe').contents().height());
});

Wenn der Inhalt der Iframes abgeschlossen ist, wird das Ereignis ausgelöst und die IFrames-Höhe wird auf die Höhe des Inhalts eingestellt. Dies funktioniert nur für Seiten in derselben Domäne wie die des IFrame.

Der Code dafür ohne jQuery ist heutzutage trivial:

const frame = document.querySelector('iframe')
function syncHeight() {
  this.style.height = `${this.contentWindow.document.body.offsetHeight}px`
}
frame.addEventListener('load', syncHeight)

So lösen Sie die Veranstaltung aus:

frame.removeEventListener('load', syncHeight)

Sie brauchen dazu keine Jquery im iframe, aber ich verwende es, da der Code so viel einfacher ist ...

Fügen Sie dies in das Dokument in Ihren iframe ein.

$(document).ready(function() {
  parent.set_size(this.body.offsetHeight + 5 + "px");  
});

fünf oben hinzugefügt, um die Bildlaufleiste in kleinen Fenstern zu eliminieren, die Größe ist nie perfekt.

Und dies in Ihrem übergeordneten Dokument.

function set_size(ht)
{
$("#iframeId").css('height',ht);
}

ein einfacher Einzeiler beginnt mit einer Standard-Mindesthöhe und vergrößert den Inhalt.

<iframe src="http://url.html" onload='javascript:(function(o){o.style.height=o.contentWindow.document.body.scrollHeight+"px";}(this));' style="height:200px;width:100%;border:none;overflow:hidden;"></iframe>

Die Funktion $('iframe').load der akzeptierten Antwort erzeugt nun a.indexOf is not a function Error. Kann aktualisiert werden auf:

$('iframe').on('load', function() {
  // ...
});

Nur wenige andere ähnlich wie .load veraltet seit jQuery 1.8: Fehler "Nicht erfasster TypeError: a.indexOf ist keine Funktion" beim Öffnen eines neuen Foundation-Projekts

dies ist die richtige Antwort, die für mich funktioniert hat

$(document).ready(function () {
        function resizeIframe() {
            if ($('iframe').contents().find('html').height() > 100) {
                $('iframe').height(($('iframe').contents().find('html').height()) + 'px')
            } else {
                setTimeout(function (e) {
                    resizeIframe();
                }, 50);
            }
        }
        resizeIframe();
    });