Normalt stiller du inn og bredde og høyde for iframes. Hvis innholdet er større, må rullefelt være tilstrekkelig. Skriptet nedenfor prøver å fikse det ved å endre størrelsen på iframe dynamisk slik at det passer til innholdet det lastes inn.
$(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'; )); ) )); Vil endre størrelse på en iframe slik:
Se demo
Fortsatt problematisk ...
- Kilden til iframe-innholdet må være på samme domene
- hvis innholdet i iframe endrer høyde, vil dette ikke tilpasse seg
- Jeg la Google Analytics-koden fra demoen ovenfor, som når jeg la den til i det, ser det ut til å forstyrre og ikke endre størrelsen på iframe, til tross for at det tilsynelatende ikke genererer noen feil.