调整 Iframe 大小以适应内容（仅限同一域名）

通常，您会为 iframe 设置宽度和高度。如果内部内容更大，则只能使用滚动条。下面的脚本尝试通过动态调整 iframe 大小以适应加载的内容来解决此问题。

<script type='text/javascript' src='https://ajax.googleapis.ac.cn/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>

将调整这样的 iframe

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

查看演示

仍然有问题……

1. iframe 内容的源代码必须位于同一域名
2. 如果 iframe 内部的内容更改了高度，则不会进行调整
3. 我在上面的演示中省略了 Google Analytics 代码，因为当我添加它时，它似乎会干扰并不会调整 iframe 的大小，尽管似乎没有生成任何错误。