0

Como puedo hacer que el Iframe se redimensione de acuerdo al tamaño de su contenido.

var ifr='<iframe  width="100%" height="auto" frameborder="0" style="border:0" allowfullscreen ' +' src='+src+'><iframe/>' ;
   document.getElementById("idFicha").innerHTML = ifr;

El iframe carga en Index.vue

<div class="col-lg-12" id="fame_data" style="display: none;">
    <div class="row">
        <div id="idFicha" ></div>
    </div>
 </div>

1 respuesta 1

1

Se me ocurren dos opciones:

En primer lugar, te propongo un codigo en javascript sencillo el cual tomara el heigth del contenido de la pagina que quieres cargar. Quedaria asi:

El iframe:

 <iframe id="iframe" src='+src+' width="100%" height="0" onload="resizeIframe(this)" style="border:0"></iframe>

La funcion resizeIframe() de javascript:

function resizeIframe(iframe) {
    iframe.height = iframe.contentWindow.document.body.scrollHeight + "px";
}

Esto permite que el alto del iframe sea ajustado automáticamente al alto del contenido dentro del mismo, y que el ancho sea de 100% de la ventana.


Por otra parte, existe una etiqueta html poco conocida llamada <object>, te explico como usar esta en vez de <iframe>

<object data='+src+' type="text/html" width="100%" height="100%"></object>

Esta seria el equivalente a lo que hice con el iframe pero con object lo que de esta forma te ahorras el javascript. El atributo data cargaria la pagina en cuestion y el atributo type especificaria el tipo del contenido.


Te comento que tanto de una forma o de otra, te podrias encontrar con ciertas restricciones acerca del cross-domain y debes de tener en cuenta que si lo que intentas cargar proviene de una pagina externa a la tuya, estas opciones de redimensionamiento han de estar configuradas para permitirlo automaticamente.

Hace algunos dias, respondi una pregunta sobre este problema en el que comentaba el uso de proxys y funciono correctamente a si que si tienes dudas al respecto, te lo dejo por aqui para que le eches un vistazo. Pagina HTML5 no muestra contenido de iframe

Un saludo y espero haberte ayudado!

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.