Estoy cargando una página web aspx en un iframe. El contenido del iframe puede tener una altura mayor que la del iframe. El iframe no debe tener barras de desplazamiento.
Tengo una etiqueta wrapper div
dentro del iframe que básicamente es todo el contenido. Escribí un poco de jQuery para hacer que el cambio de tamaño suceda:
$("#TB_window", window.parent.document).height($("body").height() + 50);
donde
TB_window
es el div en el que está contenido el Iframe
.
body
- la etiqueta body del aspx en el iframe.
Este script se adjunta al contenido del iframe. Estoy obteniendo el elemento TB_window
de la página principal. Mientras que esto funciona bien en Chrome, pero el TB_window colapsa en Firefox. Estoy realmente confundido/perdido en por qué sucede esto.
Puedes recuperar la altura del contenido del IFRAME
's utilizando:
contentWindow.document.body.scrollHeight
Una vez cargado el IFRAME
, puedes cambiar la altura haciendo lo siguiente:
<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>
Luego, en la etiqueta IFRAME
, enganchas el manejador así:
<iframe id="idIframe" onload="iframeLoaded()" ...
Hace un tiempo tuve una situación en la que además necesitaba llamar a iframeLoaded
desde el propio IFRAME
después de que se produjera un envío de formulario dentro. Puedes conseguirlo haciendo lo siguiente dentro de los scripts de contenido del IFRAME
:
parent.iframeLoaded();
Una respuesta ligeramente mejorada a Aristos...
<script type="text/javascript">
function resizeIframe(iframe) {
iframe.height = iframe.contentWindow.document.body.scrollHeight + "px";
}
</script>
Entonces declara en tu iframe lo siguiente:
<iframe onload="resizeIframe(this)" ...
Hay dos mejoras menores:
Editar: Si el contenido en el marco siempre está cambiando entonces llame:
parent.resizeIframe(this.frameElement);
desde el interior del iframe después de la actualización. Funciona para el mismo origen.
O para la autodetección:
// 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
y / o
$(window).height()
Véase la pregunta de Stack Overflow https://stackoverflow.com/questions/806402.
Prueba esto para encontrar la altura del cuerpo en jQuery:
if $("body").height()
No tiene un valor si Firebug. Quizás ese sea el problema.