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

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

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