Normalmente, establece un ancho y alto para iframes. Si el contenido interior es más grande, las barras de desplazamiento deben ser suficientes. El siguiente script intenta solucionarlo cambiando dinámicamente el tamaño del iframe para que se ajuste al contenido que carga.
$(function()( var iFrames = $('iframe'); function iResize() ( for (var i = 0, j = iFrames.length; i < j; i++) ( iFrames(i).style.height = iFrames(i).contentWindow.document.body.offsetHeight + 'px';) ) if ($.browser.safari || $.browser.opera) ( iFrames.load(function()( setTimeout(iResize, 0); )); for (var i = 0, j = iFrames.length; i < j; i++) ( var iSource = iFrames(i).src; iFrames(i).src = ''; iFrames(i).src = iSource; ) ) else ( iFrames.load(function() ( this.style.height = this.contentWindow.document.body.offsetHeight + 'px'; )); ) )); Cambiará el tamaño de un iframe como este:
Ver demostración
Sigue siendo problemático ...
- La fuente del contenido del iframe debe residir en el mismo dominio
- si el contenido dentro del iframe cambia de altura, esto no se adaptará
- Dejé el código de Google Analytics fuera de la demostración anterior, ya que cuando lo agregué parece interferir y no cambiar el tamaño del iframe, a pesar de que aparentemente no genera errores.