Redimensionar iframe para caber no conteúdo (apenas no mesmo domínio) - CSS-Tricks

Anonim

Normalmente você define largura e altura para iframes. Se o conteúdo interno for maior, as barras de rolagem devem ser suficientes. O script a seguir tenta corrigir isso redimensionando dinamicamente o iframe para caber no conteúdo que carrega.

 $(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'; )); ) )); 

Irá redimensionar um iframe como este:



Ver demonstração

Ainda problemático ...

  1. A fonte do conteúdo do iframe deve residir no mesmo domínio
  2. se o conteúdo dentro do iframe mudar de altura, isso não se adaptará
  3. Eu deixei o código do Google Analytics fora da demonstração acima, pois quando o adicionei ele parece interferir e não redimensionar o iframe, apesar de aparentemente não gerar erros.