jquery ruft beim Laden die Höhe des Iframe-Inhalts ab

Ich habe eine Hilfeseite, help.php, die ich in einen Iframe in main.php lade. Wie kann ich die Höhe dieser Seite ermitteln, nachdem sie in den Iframe geladen wurde?

Ich frage dies, weil ich die Höhe von iframe nicht auf 100% oder auto stylen kann. Deshalb denke ich, dass ich Javascript verwenden muss. Ich verwende jQuery

CSS:

body {
    margin: 0;
    padding: 0;
}
.container {
    width: 900px;
    height: 100%;
    margin: 0 auto;
    background: silver;
}
.help-div {
    display: none;
    width: 850px;
    height: 100%;
    position: absolute;
    top: 100px;
    background: orange;
}
#help-frame {
    width: 100%;
    height: auto;
    margin:0;
    padding:0;
}

JS:

$(document).ready(function () {
    $("a.open-help").click(function () {
        $(".help-div").show();
        return false;
    })
})

HTML:

<div class='container'>
    <!-- -->
    <div class='help-div'>
        <p>This is a div with an iframe loading the help page</p>
        <iframe id="help-frame" src="../help.php" width="100%" height="100%" frameborder="1"></iframe>
    </div>  <a class="open-help" href="#">open Help in iFrame</a>

    <p>hello world</p>
    <p>hello world</p>
    <p>hello world</p>
    <p>hello world</p>
    <p>hello world</p>
</div>

ok ich habe endlich eine gute lösung gefunden:

$('iframe').load(function() {
    this.style.height =
    this.contentWindow.document.body.offsetHeight + 'px';
});

Da einige Browser (ältere Safari und Opera) den Onload-Vorgang vor dem Rendern von CSS als abgeschlossen melden, müssen Sie ein Micro-Timeout festlegen und den src des Iframes ausblenden und neu zuweisen.

$('iframe').load(function() {
    setTimeout(iResize, 50);
    // Safari and Opera need a kick-start.
    var iSource = document.getElementById('your-iframe-id').src;
    document.getElementById('your-iframe-id').src = '';
    document.getElementById('your-iframe-id').src = iSource;
});
function iResize() {
    document.getElementById('your-iframe-id').style.height = 
    document.getElementById('your-iframe-id').contentWindow.document.body.offsetHeight + 'px';
}

Die weniger komplizierte Antwort ist, um .contents()zum Iframe zu gelangen. Interessanterweise gibt es jedoch einen anderen Wert als den, den ich mit dem Code in meiner ursprünglichen Antwort erhalte, aufgrund der Polsterung am Körper, glaube ich.

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

So habe ich es für die domänenübergreifende Kommunikation gemacht, daher befürchte ich, dass es möglicherweise unnötig kompliziert ist. Zuerst würde ich jQuery in das Dokument des iFrame einfügen. Dies verbraucht mehr Speicher, sollte jedoch die Ladezeit nicht verlängern, da das Skript nur einmal geladen werden muss.

Verwenden Sie die jQuery des iFrame, um die Höhe des Körpers Ihres Iframes so früh wie möglich zu messen (onDOMReady), und setzen Sie dann den URL-Hash auf diese Höhe. onloadFügen Sie im übergeordneten Dokument dem iFrame-Tag ein Ereignis hinzu, das die Position des Iframes ü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 eine Race-Bedingung die Dinge kompliziert.

Mit anderen Worten:

... in 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 festgestellt, dass Folgendes für Chrome, Firefox und IE11 funktioniert:

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

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

Der Code, um dies ohne jQuery zu tun, ist heutzutage trivial:

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

So haken Sie die Veranstaltung aus:

frame.removeEventListener('load', syncHeight)

Sie brauchen keine Abfrage im Iframe, um dies zu tun, aber ich benutze es, weil der Code so viel einfacher ist ...

Fügen Sie dies in das Dokument in Ihrem Iframe ein.

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

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

Und das in Ihrem übergeordneten Dokument.

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

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

Ein einfacher Einzeiler beginnt mit einer Standard-Mindesthöhe und erhöht sich auf die Inhaltsgröße.

<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>

Akzeptierte Antworten $('iframe').loadführen nun zu a.indexOf is not a functionFehlern. Kann aktualisiert werden auf:

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

Nur wenige andere, die .loadseit jQuery 1.8 veraltet sind: "Nicht erfasster TypeError: a.indexOf ist keine Funktion" -Fehler beim Öffnen eines neuen Foundation-Projekts

Dies ist eine jQuery-freie Lösung, die mit SPA im Iframe zusammenarbeiten kann

document.getElementById('iframe-id').addEventListener('load', function () {
  let that = this;
  setTimeout(function () {
    that.style.height = that.contentWindow.document.body.offsetHeight + 'px';
  }, 2000) // if you're having SPA framework (angularjs for example) inside the iframe, some delay is needed for the content to populate
});

Dies ist meine ES6-freundliche No-JQuery-Einstellung

document.querySelector('iframe').addEventListener('load', function() {
    const iframeBody = this.contentWindow.document.body;
    const height = Math.max(iframeBody.scrollHeight, iframeBody.offsetHeight);
    this.style.height = `${height}px`;
});