Iframe an Inhalt anpassen (nur gleiche Domain)

Avatar of Chris Coyier
Chris Coyier am

Normalerweise legt man Breite und Höhe für Iframes fest. Wenn der Inhalt größer ist, müssen Scrollbalken ausreichen. Das folgende Skript versucht, dies zu beheben, indem es die Größe des Iframes dynamisch an den geladenen Inhalt anpasst.

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js?ver=1.3.2'></script>
<script type='text/javascript'>
    
    $(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';
        	   });
        	}
        
        });

</script>

Wird einen Iframe wie diesen vergrößern

<iframe src="content.html" class="iframe" scrolling="no" frameborder="0"></iframe>

 

Demo ansehen

Immer noch problematisch…

  1. Die Quelle des Iframe-Inhalts muss sich auf derselben Domain befinden
  2. Wenn sich die Höhe des Inhalts im Iframe ändert, passt sich dies nicht an
  3. Ich habe den Google Analytics-Code aus dem obigen Demo entfernt, da er, wenn ich ihn hinzufügte, anscheinend interferiert und die Größe des Iframes nicht anpasst, obwohl scheinbar keine Fehler generiert werden.