iframe高度自适应

调整iframe的高度使之不出现滚动条是很常见的需求，原来一直用一个函数，后来发现封装的不太好，于是今天优化了一下。

主要的问题是获取iframe本身元素以及获取iframe中文档对象的区别，获取iframe元素只需要用document.getElementById(frameId);,而获取获取文档对象则需要window.frames[frameName].document的方式来获取。

所有针对iframe元素的操作都可以直接过去元素，而与iframe内容相关的各种操作，如获取所包含文档中的一个js变量，要先获取window对象，然后才能执行操作。

/*
 * 调整iframe的高度以适应所引用网页的高度
 */
function iframeResize(frameId, frameName) {
    var dyniframe   = null;
    var indexwin    = null;
    if (document.getElementById){
        if(!frameId) {
        	frameId = "contentFrame";
            frameName = "contentFrame";
        }
        dyniframe       = document.getElementById(frameId);
        indexwin        = window;
        if (dyniframe){
            var contentHeight = window.frames[frameName].document.body.scrollHeight;
            dyniframe.height = (!contentHeight || contentHeight < 600) ? 600 : contentHeight;
        }
    }
}     

评论

3 楼 liudaoru 2008-10-31  

	/*
	 * 调整iframe的高度以适应所引用网页的高度
	 */
	function iframeResize(frameId, frameName) {
	    var dyniframe   = null;
	    var indexwin    = null;
	    if (document.getElementById){
	        if(!frameId) {
	        	frameId = "contentFrame";
	            frameName = "contentFrame";
	        }
	        dyniframe       = document.getElementById(frameId);
	        indexwin        = window;
	        if (dyniframe){
				  var contentHeight, win = indexwin.frames[frameName];  
				  if (win.innerHeight && win.scrollMaxY) {  
				    contentHeight = win.innerHeight + win.scrollMaxY;
				  } else if (win.document.body.scrollHeight > win.document.body.offsetHeight){ // all but Explorer Mac
				    contentHeight = win.document.body.scrollHeight + 20;
				  } else { // Explorer Mac...would also work in Explorer 6 Strict, Mozilla and Safari
				    contentHeight = win.document.body.offsetHeight;
				  }
	            dyniframe.height = (!contentHeight || contentHeight < 400) ? 400 : contentHeight;
	        }
	    }
	}     

2 楼 liudaoru 2008-09-11  

呵呵，谢谢补充。。。。

1 楼 goagrass 2008-09-08  

iframe自适应高度及其演示实例
http://www.cssplay.org.cn/xhtml-tutorial/20080908/763.html