¿Hacer que el iframe ajuste automáticamente la altura según el contenido sin usar la barra de desplazamiento? [duplicar]
Por ejemplo:
<iframe name="Stack" src="http://stackoverflow.com/" width="740"
frameborder="0" scrolling="no" id="iframe"> ...
</iframe>
Quiero que pueda ajustar su altura según el contenido que contiene, sin utilizar el desplazamiento.
Aceptado
Añade esto a tu <head>sección:
<script>
function resizeIframe(obj) {
obj.style.height = obj.contentWindow.document.documentElement.scrollHeight + 'px';
}
</script>
Y cambia tu iframe a esto:
<iframe src="..." frameborder="0" scrolling="no" onload="resizeIframe(this)" />
Como se encuentra en la discusión del punto del sitio .
Puede usar esta biblioteca, que inicialmente dimensiona correctamente su iframe y también lo mantiene en el tamaño correcto al detectar cada vez que cambia el tamaño del contenido del iframe (ya sea mediante el control regular en a o setIntervalmediante MutationObserver) y cambiar su tamaño.
https://github.com/davidjbradshaw/iframe-resizer
También hay una versión React.
https://github.com/davidjbradshaw/iframe-resizer-react
Esto funciona con iframes tanto cruzados como del mismo dominio.
Aquí hay una versión compacta:
<iframe src="hello.html" sandbox="allow-same-origin"
onload="this.style.height=(this.contentWindow.document.body.scrollHeight+20)+'px';">
</iframe>
