Změnit velikost iframe tak, aby odpovídal obsahu (pouze pro stejnou doménu) - Triky CSS

Anonim

Normálně nastavujete a šířku a výšku pro prvky iframe. Pokud je obsah uvnitř větší, musí stačit posuvníky. Níže uvedený skript se to pokusí napravit dynamickou změnou velikosti prvku iframe tak, aby odpovídal načtenému obsahu.

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

Změní velikost iframe takto:



Zobrazit ukázku

Stále problematické…

  1. Zdroj obsahu iframe musí být umístěn ve stejné doméně
  2. pokud obsah uvnitř iframe změní výšku, toto se nepřizpůsobí
  3. Opustil jsem kód Google Analytics z výše uvedeného dema, protože když jsem ho přidal, zdá se, že ruší a nezmění velikost iframe, přestože zdánlivě generuje žádné chyby.