Normalt ställer du in och bredd och höjd för iframes. Om innehållet inuti är större måste rullstaplar räcka. Skriptet nedan försöker fixa det genom att dynamiskt ändra storlek på iframe så att det passar innehållet det laddas.
$(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'; )); ) )); Kommer att ändra storlek på en iframe så här:
Visa demo
Fortfarande problematisk ...
- Källan till iframe-innehållet måste finnas på samma domän
- om innehållet i iframe ändrar höjd kommer detta inte att anpassas
- Jag lämnade Google Analytics-koden från demo ovan, som när jag lade till den i det verkar störa och inte ändra storlek på iframe, trots att det verkar generera inga fel.