Necesito una solución para autoajustar el ancho
y el alto
de un iframe
para que apenas se ajuste a su contenido. La cuestión es que la anchura y la altura se pueden cambiar después de que el iframe
se haya cargado. Supongo que necesito una acción de evento para tratar el cambio de 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>
Navegador cruzado plug-in jQuery.
Cross-bowser, cross-dominio librería que utiliza mutationObserver
para mantener el tamaño del iFrame al contenido y postMessage
para comunicarse entre el iFrame y la página anfitriona. Funciona con o sin jQuery.
Aquí hay una solución para todos los navegadores si no quieres usar jQuery:
/**
* Resizes the given iFrame width so it fits its content
* @param e The iframe to resize
*/
function resizeIframeWidth(e){
// Set width of iframe according to its content
if (e.Document && e.Document.body.scrollWidth) //ie5+ syntax
e.width = e.contentWindow.document.body.scrollWidth;
else if (e.contentDocument && e.contentDocument.body.scrollWidth) //ns6+ & opera syntax
e.width = e.contentDocument.body.scrollWidth + 35;
else (e.contentDocument && e.contentDocument.body.offsetWidth) //standards compliant syntax – ie8
e.width = e.contentDocument.body.offsetWidth + 35;
}