Código fuente JavaScript | Pixabay
Que tal, saludos a todos:
Un iframe es un elemento HTML que nos permite insertar el contenido de un sitio web dentro de otro (con algunas limitaciones a veces), esto es algo muy útil si queremos insertar parte de nuestro sitio en otra parte. Normalmente iframe permite activar las barras de desplazamiento o no (según gustemos) para mostrar el contenido que excede las dimensiones del mismo, sin embargo a veces necesitemos que todo el contenido del iframe se muestre, pero no conocemos las dimensiones por lo que es "muy difícil" ajustar todo el tiempo el ancho y alto del iframe.
Afortunadamente la solución es muy sencilla, gracias a JavaScript podemos detectar la carga completa del iframe, obtener las dimensiones del contenido y hacer que el iframe ajuste su tamaño. Nota: aunque es posible cargar contenido externo mediante un iframe "no es posible" leer el contenido del mismo mediante JavaScript por motivos de seguridad por lo que "probablemente" no vaya a funcionar si tratamos de ejecutar este código insertando contenido externo a nuestro sitio web en un iframe y pensamos redimensionarlo.
<script language="JavaScript">
<!--
//thanks to https://www.it-swarm.dev/es/javascript/ajusta-el-ancho-y-alto-del-iframe-para-que-se-ajuste-al-contenido./957980692/
function resizeIFrameToFitContent(iFrameID)
{
document.getElementById(iFrameID).width = document.getElementById(iFrameID).contentWindow.document.body.scrollWidth;
document.getElementById(iFrameID).height = document.getElementById(iFrameID).contentWindow.document.body.scrollHeight;
}
function resizeIFrameToFitContentOnlyHeight(iFrameID)
{
document.getElementById(iFrameID).height = document.getElementById(iFrameID).contentWindow.document.body.scrollHeight;
}
function resizeIFrameToFitContentOnlyWidth(iFrameID)
{
document.getElementById(iFrameID).width = document.getElementById(iFrameID).contentWindow.document.body.scrollWidth;
}
function resizeiframe()
{
resizeIFrameToFitContentOnlyHeight("orders");
}
-->
</script>
Ahora solo resta llamar a una función que dispare el redimensionado del iframe al momento de que se cargue (resizeiframe)
<iframe src='paginawebainsertar' frameborder='0' scrolling='no' width='100%' id='orders' name='orders' onload='javascript:resizeiframe();'>Su navegador web no soporta IFRAME</iframe>
Esto provocará que cuando el contenido del iframe se cargue completamente se dispare la función "resizeiframe" redimensionando el alto del mismo y así ajuste su alto al contenido del contenido, podemos ajustar del mismo modo solo el ancho o ambos. Espero les sea de utilidad, gracias por su visita.
