Normalerweise legen Sie Breite und Höhe für Iframes fest. Wenn der Inhalt größer ist, müssen Bildlaufleisten ausreichen. Das folgende Skript versucht, dies zu beheben, indem die Größe des Iframes dynamisch an den geladenen Inhalt angepasst wird.
$(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'; )); ) )); Ändert die Größe eines Iframes wie folgt:
Demo anzeigen
Immer noch problematisch…
- Die Quelle des Iframe-Inhalts muss sich in derselben Domäne befinden
- Wenn sich der Inhalt des Iframes in der Höhe ändert, wird dies nicht angepasst
- Ich habe den Google Analytics-Code in der obigen Demo weggelassen, da er beim Hinzufügen den Iframe zu stören scheint und seine Größe nicht ändert, obwohl scheinbar keine Fehler generiert wurden.