iframe加载后自适应高度

今天为iframe花了好多时间，最终只需用修改一行代码，真是很无语...不过这和自己对iframe相关的知识点不熟有关。

今天要改的地方是：iframe的事件onload在ie6下没有执行，所以ie6下无法进行高度调整，而iframe里是几个tab，每个tab高度都不一样，需用点击tan然后重新计算高度，并改变。

代码如下：

<div id="footer">
  <iframe id="additional" name="additional" width="100%" src='test.php' frameBorder="0" scrolling="no" οnlοad="javascript:adjustIFrameHeight(this);">
  </iframe>
</div>

父级页面js如下：

function adjustIFrameHeight(ifm) {
	if (ifm != null && ifm.contentDocument != null) {
		ifm.height = ifm.contentDocument.body.scrollHeight;
	}
}

子级页面tab事件绑定js：

 jQuery(function (footer) {
        footer.use('ui-tabs', function () {
            footer('#tab4').tabs({
                isAutoPlay:false,
                event:'click',
                show:function () {
                    if (parent) {
                        parent.document.body.getElementsByTagName('iframe')[0].height = document.body.scrollHeight;
                        if (inited) {
                            parent.window.scrollTo(0, 99999);
                        }
                    }
                }
            });
            var inited = true;
        });
    });

问题就出在这几行代码里面，但是自己用打印日志的方法判断js是否有执行，在ff、chrome、ie8这些都正常，但就是在ie6下面不行，连dom ready都没有。

因为是同域请求，所以关于跨域方面的问题可以排除。

一开始以为是页面的问题，子页面加载异常，所以把js文件和代码都放在页面最下面，但是还是没用。认为是父页面的onload事件在ie6下面失效，所以想修改方法，但是后面在子页面发现上面这段代码之后，我觉得是子页面的问题了。

这时我已经很接近成功了，但是我用打印日志的方法，所以我一直没把目标放在里面的具体代码里。自己只是在里面加just.log("test!");

下次应该换个方法，用alert()；因为有时候一些函数库会莫名其妙失效，我现在也还弄明白为什么子页面的日志都无法打印，但是js代码明明都执行过了。

最终用alert()；之后，终于把问题定位到

parent.document.body.getElementsByTagName('iframe')[0].height = document.body.scrollHeight;

使用alert(document.body.scrollHeight);发现，每次打印出来的高度都是不对的，在ie6下，在ff、chrome下都不一样。

alert(parent.document.body.getElementsByTagName,length);，发现打印的数字是6，也就是说父级的iframe有6个。

这怎么可能呢？明明就只有一个iframe啊。算了，别想那么多，直接换一个方法，修改如下：

	function load(){
		jQuery.use('ui-tabs', function () {
			var inited = false;
			jQuery('#tab4').tabs({
				isAutoPlay:false,
				event:'click',
				show:function () {
					if (parent) {
						var ifrHeight=jQuery(document.body).height();
						parent.document.getElementById('additional').height = ifrHeight;
						if (inited) {
							parent.window.scrollTo(0, 99999);
						} else {
							inited = true;
						}
					}
				}
			});

		});
	}

这时终于正常了。

其实只要自己早点使用alert()来判断，我可能早就找到问题了。所以，掌握多样调试方法，特别是对待前端，一定要灵活点。