javascript - example - php iframe
Cómo auto-tamaño de un iFrame? (12)
Posible duplicado:
Cambiar el tamaño de un iframe basado en el contenido
Estoy cargando un iFrame y quiero que el padre cambie automáticamente la altura según la altura del contenido del iFrame.
Para simplificar, todas las páginas pertenecen al mismo dominio, por lo que no debería encontrarse con problemas de scripts entre sitios.
Aquí hay una solución sencilla que funciona en todos los navegadores y con dominios cruzados:
En primer lugar, esto funciona con el concepto de que si la página html que contiene el iframe está configurada a una altura del 100% y el iframe está diseñado con css para tener una altura del 100%, entonces css ajustará automáticamente todo para que quepa.
Aquí está el código:
<head>
<style type="text/css">
html {height:100%}
body {
margin:0;
height:100%;
overflow:hidden
}
</style>
</head>
<body>
<iframe allowtransparency=true frameborder=0 id=rf sandbox="allow-same-origin allow-forms allow-scripts" scrolling=auto src="http://www.externaldomain.com/" style="width:100%;height:100%"></iframe>
</body>
En IE 5.5+, puede usar la propiedad contentWindow:
iframe.height = iframe.contentWindow.document.scrollHeight;
En Netscape 6 (asumiendo también Firefox), propiedad contentDocument:
iframe.height = iframe.contentDocument.scrollHeight
En realidad, el código de Patrick también funcionó para mí. La forma correcta de hacerlo sería en la línea de esto:
Nota: hay un poco de jquery por delante:
if ($.browser.msie == false) {
var h = (document.getElementById("iframeID").contentDocument.body.offsetHeight);
} else {
var h = (document.getElementById("iframeID").Document.body.scrollHeight);
}
Encontré la solución de @ShripadK más útil, pero no funciona, si hay más de un iframe. Mi solución es:
function autoResizeIFrame() {
$(''iframe'').height(
function() {
return $(this).contents().find(''body'').height() + 20;
}
)
}
$(''iframe'').contents().find(''body'').css(
{"min-height": "100", "overflow" : "hidden"});
setTimeout(autoResizeIFrame, 2000);
setTimeout(autoResizeIFrame, 10000);
-
$(''iframe'').height($(''iframe'').contents().find(''body'').height() + 20)establecería la altura de cada cuadro con el mismo valor, es decir, la altura del contenido del primer fotograma. Así que estoy usando laheight()de jqueryheight()con una función en lugar de un valor. De esta forma, las alturas individuales se calculan -
+ 20es un truco para solucionar los problemas de la barra de desplazamiento iframe. El número debe ser más grande que el tamaño de una barra de desplazamiento. El truco probablemente se puede evitar, pero deshabilita las barras de desplazamiento para el iframe. - Uso
setTimeoutlugar desetInterval(..., 1)para reducir la carga de la CPU en mi caso
Esta solution funcionó mejor para mí. Utiliza jQuery y el evento ".load" del iframe.
Este es el método más fácil que he encontrado usando un prototipo:
Main.html:
<html>
<head>
<script src="prototype.js"></script>
<script>
function init() {
var iframe = $(document.getElementById("iframe"));
var iframe_content = $(iframe.contentWindow.document.getElementById("iframe_content"));
var cy = iframe_content.getDimensions().height;
iframe.style.height = cy + "px";
}
</script>
</head>
<body onload="init()">
<iframe src="./content.html" id="iframe" frameBorder="0" scroll="no"></iframe>
<br>
this is the next line
</body>
</html>
content.html:
<html>
<head>
<script src="prototype.js"></script>
<style>
body {
margin: 0px;
padding: 0px;
}
</style>
</head>
<body>
<div id="iframe_content" style="max-height:200px;">
Sub content<br>
Sub content<br>
...
...
...
</div>
</body>
</html>
Esto parece funcionar (hasta ahora) en todos los principales navegadores.
Me acabo de llegar tu pregunta y tengo una solución. Pero está en jquery. Es muy simple.
$(''iframe'').contents().find(''body'').css({"min-height": "100", "overflow" : "hidden"});
setInterval( "$(''iframe'').height($(''iframe'').contents().find(''body'').height() + 20)", 1 );
¡Aquí tienes!
¡Aclamaciones! :)
Editar: si tiene un editor de texto enriquecido basado en el método iframe y no en el método div y desea que se expanda cada nueva línea, entonces este código hará lo necesario.
Mi solución consiste en establecer el iframe con el alto / ancho sobre cualquier tamaño de página de origen anticipado en CSS y la propiedad de background en transparent .
En el iframe, establezca allow-transparency en true y scrolling a no .
Lo único visible será cualquier archivo fuente que use. Funciona en IE8, Firefox 3 y Safari.
Mi solución, (usando jquery):
<iframe id="Iframe1" class="tabFrame" width="100%" height="100%" scrolling="no" src="http://samedomain" frameborder="0" >
</iframe>
<script type="text/javascript">
$(function () {
$(''.tabFrame'').load(function () {
var iframeContentWindow = this.contentWindow;
var height = iframeContentWindow.$(document).height();
this.style.height = height + ''px'';
});
});
</script>
Oli tiene una solución que funcionará para mí. Para el registro, la página dentro de mi iFrame es renderizada por javascript, por lo que necesitaré un retraso infinitesimal antes de informar el offsetHeight. Parece algo en esta línea:
$(document).ready(function(){
setTimeout(setHeight);
});
function setHeight() {
alert(document[''body''].offsetHeight);
}
En cualquier otro elemento, utilizaría scrollHeight del objeto DOM y establecería la altura en consecuencia. No sé si esto funcionaría en un iframe (porque están un poco chiflados acerca de todo) pero ciertamente vale la pena intentarlo.
Editar: Después de echar un vistazo, el consenso popular es establecer la altura desde dentro del iframe usando el offsetHeight :
function setHeight() {
parent.document.getElementById(''the-iframe-id'').style.height = document[''body''].offsetHeight + ''px'';
}
Y adjunte eso para ejecutar con el evento onLoad del cuerpo del onLoad .