Ich lade eine aspx-Webseite in einem Iframe. Der Inhalt im Iframe kann höher sein als die Höhe des iframe's. Der iframe sollte keine Bildlaufleisten haben.
Ich habe einen Wrapper div
Tag innerhalb des iframe, der im Grunde den gesamten Inhalt darstellt. Ich habe etwas jQuery geschrieben, um die Größenänderung zu ermöglichen:
$("#TB_window", window.parent.document).height($("body").height() + 50);
wobei TB_window" ist das Div, in dem der "Iframe" enthalten ist.
Body" - der Body-Tag der Aspx im Iframe.
Dieses Skript ist an den Inhalt des iframe angehängt. Ich erhalte das Element TB_window
von der übergeordneten Seite. Während dies in Chrome gut funktioniert, kollabiert das TB_window in Firefox. Ich bin wirklich verwirrt/verloren, warum das passiert.
Sie können die Höhe des Inhalts des "IFRAME" abrufen, indem Sie verwenden:
contentWindow.document.body.scrollHeight
Nachdem der "IFRAME" geladen ist, können Sie die Höhe wie folgt ändern:
<script type="text/javascript">
function iframeLoaded() {
var iFrameID = document.getElementById('idIframe');
if(iFrameID) {
// here you can make the height, I delete it first, then I make it again
iFrameID.height = "";
iFrameID.height = iFrameID.contentWindow.document.body.scrollHeight + "px";
}
}
</script>
Dann, auf dem IFRAME
-Tag, haken Sie den Handler wie folgt ein:
<iframe id="idIframe" onload="iframeLoaded()" ...
Ich hatte vor einiger Zeit eine Situation, in der ich zusätzlich iframeLoaded
aus dem IFRAME
selbst aufrufen musste, nachdem eine Formularübermittlung darin stattgefunden hatte. Das kann man erreichen, indem man in den Inhaltsskripten des IFRAME
's das Folgende tut:
parent.iframeLoaded();
Eine leicht verbesserte Antwort auf Aristos...
<script type="text/javascript">
function resizeIframe(iframe) {
iframe.height = iframe.contentWindow.document.body.scrollHeight + "px";
}
</script>
Dann deklarieren Sie in Ihrem iframe wie folgt:
<iframe onload="resizeIframe(this)" ...
Es gibt zwei kleinere Verbesserungen:
Bearbeiten: Wenn sich der Inhalt des Rahmens ständig ändert, rufen Sie auf:
parent.resizeIframe(this.frameElement);
aus dem iframe nach der Aktualisierung auf. Funktioniert für denselben Ursprung.
Oder zur automatischen Erkennung:
// on resize
this.container = this.frameElement.contentWindow.document.body;
this.watch = () => {
cancelAnimationFrame(this.watcher);
if (this.lastScrollHeight !== container.scrollHeight) {
parent.resizeIframeToContentSize(this.frameElement);
}
this.lastScrollHeight = container.scrollHeight;
this.watcher = requestAnimationFrame(this.watch);
};
this.watcher = window.requestAnimationFrame(this.watch);
$(document).height() // - $('body').offset().top
und / oder
$(window).height()
Siehe Stack Overflow Frage https://stackoverflow.com/questions/806402.
Versuchen Sie dies, um die Höhe des Körpers in jQuery zu ermitteln:
if $("body").height()
Es hat keinen Wert, wenn Firebug. Vielleicht ist das das Problem.