iframe自适应高度完美方法，兼容浏览器

最新推荐文章于 2021-06-07 13:32:39 发布

原创最新推荐文章于 2021-06-07 13:32:39 发布 · 176 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#浏览器 #IE #Safari

iframe愚意专栏收录该内容

1 篇文章

订阅专栏

本文介绍了一种实现同域下iframe子页面高度自适应的方法。通过监听iframe加载完成事件，动态调整iframe的高度，使其能够随内容变化而变化。适用于多种浏览器环境。

同域、子页面高度不会动态增加：

(function(){
			
		    var iframe = document.getElementById("contentIframe"),//这里填iframeID
		    
		        setIframeHeight = function(){
		        
		            var frameContent = iframe.contentWindow.document,
		            
		                frameHeight = Math.max(frameContent.body.scrollHeight,frameContent.documentElement.scrollHeight);

		            iframe.height = frameHeight;
		        };
		    if(iframe.addEventListener){//Mozilla safari......
			    
		    	iframe.addEventListener("load",setIframeHeight,false);
		        
		    }else if(iframe.attachEvent){//IE等浏览器
			    
		    	iframe.attachEvent("onload",setIframeHeight);
		    }
		    else{
		    	iframe.onload=setIframeHeight;
			}
		})();