Normalt indstiller du og bredde og højde for iframes. Hvis indholdet indeni er større, skal rullebjælker være tilstrækkelige. Nedenstående script forsøger at rette det ved dynamisk at ændre størrelsen på iframe, så det passer til det indhold, det indlæser.
$(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'; )); ) )); Ændrer størrelsen på en iframe som denne:
Se demo
Stadig problematisk ...
- Kilden til iframe-indholdet skal findes på det samme domæne
- Hvis indholdet i iframe ændrer højde, vil dette ikke tilpasse sig
- Jeg forlod Google Analytics-koden fra demoen ovenfor, som da jeg tilføjede den, ser det ud til at interferere og ikke ændre størrelsen på iframe, på trods af at der tilsyneladende ikke genererer nogen fejl.