Yo mismo estaba buscando una solución simple para cambiar la altura de un iframe con el contenido que contiene.Establecer la altura del contenido del iframe para cambiar automáticamente el tamaño de forma automática
Parece que las reglas son que no se puede obtener el alto del iframe desde la página que lo contiene. Esto es debido a la seguridad aparentemente. ¿Cómo podemos hacer esto?
En el marco flotante: Así que significa que hay que añadir un poco de código en la página de marco flotante. Basta con añadir este script para su código en el iframe:
<body onload="parent.alertsize(document.body.scrollHeight);">
En la página explotación: En la página sosteniendo el marco flotante (en mi caso con ID = "myiframe") añadir una pequeña javascript:
<script>
function alertsize(pixels){
pixels+=32;
document.getElementById('myiframe').style.height=pixels+"px";
}
</script>
lo que sucede ahora es que cuando se carga el iframe se desencadena una javascript en la ventana padre, que en este caso es la página de la celebración de la iframe.
A esa función de JavaScript envía cuántos píxeles tiene su altura (iframe).
La ventana primaria toma el número, agrega 32 para evitar barras de desplazamiento y establece la altura del iframe para el nuevo número.
Eso es todo, nada más se necesita.
Pero si te gusta conocer algunos trucos más pequeñas siguen leyendo ...
altura dinámica en el iframe? Si te gusta cambiar de contenido, la altura del iframe cambiará (sin que la página se vuelva a cargar y se inicie la carga). Yo suelo añadir un guión de palanca muy simple he encontrado en Internet:
<script>
function toggle(obj) {
var el = document.getElementById(obj);
if (el.style.display != 'block') el.style.display = 'block';
else el.style.display = 'none';
}
</script>
a que el guión sólo tiene que añadir:
<script>
function toggle(obj) {
var el = document.getElementById(obj);
if (el.style.display != 'block') el.style.display = 'block';
else el.style.display = 'none';
parent.alertsize(document.body.scrollHeight); // ADD THIS LINE!
}
</script>
¿Cómo se utiliza la secuencia anterior es fácil:
<a href="javascript:toggle('moreheight')">toggle height?</a><br />
<div style="display:none;" id="moreheight">
more height!<br />
more height!<br />
more height!<br />
</div>
Para aquellos a los que les gusta cortar y pegar y pasar de allí aquí están las dos páginas. En mi caso yo los tenía en la misma carpeta, pero debería funcionar dominios también (creo ...)
completo código de la página de retención:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<title>THE IFRAME HOLDER</title>
<script>
function alertsize(pixels){
pixels+=32;
document.getElementById('myiframe').style.height=pixels+"px";
}
</script>
</head>
<body style="background:silver;">
<iframe src='theiframe.htm' style='width:458px;background:white;' frameborder='0' id="myiframe" scrolling="auto"></iframe>
</body>
</html>
Código completo iframe: (este iframe llamado "theiframe".htm ")
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<title>IFRAME CONTENT</title>
<script>
function toggle(obj) {
var el = document.getElementById(obj);
if (el.style.display != 'block') el.style.display = 'block';
else el.style.display = 'none';
parent.alertsize(document.body.scrollHeight);
}
</script>
</head>
<body onload="parent.alertsize(document.body.scrollHeight);">
<a href="javascript:toggle('moreheight')">toggle height?</a><br />
<div style="display:none;" id="moreheight">
more height!<br />
more height!<br />
more height!<br />
</div>
text<br />
text<br />
text<br />
text<br />
text<br />
text<br />
text<br />
text<br />
THE END
</body>
</html>
Parece que funcionará muy bien, pero tenga en cuenta que no funcionará entre dominios. Consulte este ejemplo para obtener un método completo de dominio cruzado: http://stackoverflow.com/questions/153152/resizing-an-iframe-based-on-content O consulte esta biblioteca más robusta para obtener ayuda para realizar un dominio cruzado: http://easyxdm.net/wp/2010/03/17/resize-iframe-based-on-content/ y también esta biblioteca que usa 'mutationObserver' para mantener el tamaño del iFrame al contenido cambiante y' postMessage' para manejar el tema de dominio cruzado. https://github.com/davidjbradshaw/iframe-resizer – Lucas
@david bradshaw hace que su secuencia de comandos funcione entre dominios sin ajustar la configuración del servidor? – Lucas
Sí, usa postMessage entre el iframe y la página principal. –
solución simple:
<iframe onload="this.style.height=this.contentWindow.document.body.scrollHeight + 'px';" ...></iframe>
Esto funciona cuando el iframe y ventana padre están en el mismo dominio No funciona cuando los dos están en. diferentes dominios.
¡Rock! Muchas gracias! – Erick
¿Realmente funciona el dominio cruzado? No lo intenté, pero creo que no debería. No puedes acceder a javascript a través de diferentes doma En s. –
Si el tamaño está configurado incorrectamente, es posible que necesite un