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!