Ajuste el ancho y el alto del iframe para que se ajuste al contenido que contiene
Necesito una solución para ajustar automáticamente el widthy heightde un iframepara que apenas se ajuste a su contenido. El punto es que el ancho y el alto se pueden cambiar una vez iframecargado. Supongo que necesito una acción de evento para lidiar con el cambio en las dimensiones del cuerpo contenido en el iframe.
<script type="application/javascript">
function resizeIFrameToFitContent( iFrame ) {
iFrame.width = iFrame.contentWindow.document.body.scrollWidth;
iFrame.height = iFrame.contentWindow.document.body.scrollHeight;
}
window.addEventListener('DOMContentLoaded', function(e) {
var iFrame = document.getElementById( 'iFrame1' );
resizeIFrameToFitContent( iFrame );
// or, to resize all iframes:
var iframes = document.querySelectorAll("iframe");
for( var i = 0; i < iframes.length; i++) {
resizeIFrameToFitContent( iframes[i] );
}
} );
</script>
<iframe src="usagelogs/default.aspx" id="iFrame1"></iframe>
Solución de una sola línea para incrustaciones: comienza con un tamaño mínimo y aumenta hasta el tamaño del contenido. no hay necesidad de etiquetas de secuencia de comandos.
<iframe src="http://URL_HERE.html" onload='javascript:(function(o){o.style.height=o.contentWindow.document.body.scrollHeight+"px";}(this));' style="height:200px;width:100%;border:none;overflow:hidden;"></iframe>
Complemento jQuery para varios navegadores .
Biblioteca cross-bowser y entre dominios que se utiliza mutationObserverpara mantener el tamaño del iFrame según el contenido y postMessagepara comunicarse entre el iFrame y la página host. Funciona con o sin jQuery.
