Normaal gesproken stelt u een breedte en hoogte in voor iframes. Als de inhoud binnen groter is, moeten schuifbalken volstaan. Het onderstaande script probeert dit op te lossen door het iframe dynamisch aan te passen aan de inhoud die het laadt.
$(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'; )); ) )); Zal het formaat van een iframe als volgt wijzigen:
Bekijk demo
Nog steeds problematisch ...
- De bron van de iframe-inhoud moet zich in hetzelfde domein bevinden
- als de inhoud in het iframe van hoogte verandert, wordt dit niet aangepast
- Ik heb de Google Analytics-code buiten de demo hierboven gelaten, want toen ik het eraan toevoegde, lijkt het het iframe te verstoren en het formaat ervan niet te wijzigen, ondanks het schijnbaar geen fouten te genereren.