6

¿Cómo puedo lograr que cada que el contenido aumente o disminuya de tamaño, se ajuste el iframe que lo contiene?

Si existe algún plugin JQuery, JavaScript puro o una solución sencilla sería de gran aporte puesto que lo que sólo logro hacer es que se adapte al contenido una vez que terminó de cargar, pero no cada que se modifica.

Adjunto el código que tengo al momento:

document.getElemenById('iframeToResize').onload = function() {
  var newheight = this.contentWindow.document.body.scrollHeight,
    newwidth = this.contentWindow.document.body.scrollWidth;

  this.height = (newheight) + 'px';
  this.width = (newwidth) + 'px';
};
<div id="iframeDiv">
  <iframe src="dominio.com/pagina" width="100%" height="100px" id="iframeToResize" marginheight="0" frameborder="0"></iframe>
</div>

Fuentes de apoyo:

  1. How can I detect whether an iframe is loaded? - Stack Overflow
  2. Adjust width height of iframe to fit with content in it - Stack Overflow
7
  • podrías -para que la pregunta sea contestable- agregar el código que utilizas para redimensionarlo cuando se termina de cargar pagina, Commented el 5 dic. 2015 a las 15:58
  • Está el contenido del iframe en el mismo dominio? Commented el 5 dic. 2015 a las 17:24
  • @RubensMariuzzo Si, mismo dominio. El contenido que quiero colocar en iframe tiene un subdominio.
    – Chofoteddy
    Commented el 5 dic. 2015 a las 17:26
  • Mira esta repuesta de como puede hacer un iframe dinamico height Ajustar iframe automáticamente a la altura de acuerdo con el contenido sin necesidad de usar la barra de desplazamiento?
    – jprevot
    Commented el 5 dic. 2015 a las 19:38
  • En efecto funciona como ahí lo mencionan, pero sólo funciona para cuando el iframe termina de cargar, es equivalente a lo que ya tengo. Lo que requiero es que cambie de tamaño conforme el contenido aumenta o disminuye.
    – Chofoteddy
    Commented el 5 dic. 2015 a las 19:45

3 respuestas 3

8

Puedes tener acceso al <iframe> desde el contenido de este (siempre y cuando sean del mismo dominio):

var iframe = window.parent.document.getElementById('miIframe');

Para tu caso particular, deberías tener algo similar a:

window.onresize = function() {
    var iframe = window.parent.document.getElementById('miIframe');
    iframe.style.width = window.style.width;
    iframe.style.height = window.style.height;
}

Toma en cuenta los valores de margin del contenido del iframe para que el cálculo sea mas preciso.

Prueba y déjame saber.

2
  • El código no me da error, de hecho depuré línea a línea y me di cuenta que todo los valores son correctos, el problema es que no detecta que el contenido se hace más grande, me imagino que por que el iframe no cambio de tamaño, por eso no lanza el evento. De hecho ya intenté usar un $('form').resize(); pero tampoco.
    – Chofoteddy
    Commented el 5 dic. 2015 a las 18:23
  • Voy a chequear en cuanto me acerque a un ordenador. Commented el 5 dic. 2015 a las 19:31
1

Podrías usar Seamless.js, la encontrás muy útil para los IFrames.

Es excelente para poder trabajar con contenido dinámico.

1
  • 1
    Vi los demos y parece que es justo lo que requiero, lo probaré y daré feedback, estaría perfecto que pudieses añadir código de ejemplo a tu respuesta para tener un argumento sólido :D más que una cita a una librería, mira un ejemplo aquí: es.stackoverflow.com/a/550/729
    – Chofoteddy
    Commented el 6 dic. 2015 a las 10:33
0

Prueba con la librería FIT.js. Esta librería utiliza las propiedades scale de css3 para redimensionar un div o cualquier elemento del dom basado en su posición y dimensiones originales para mantener las proporciones adecuadas.

Link a la librería http://soulwire.github.io/fit.js/

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