关于IFrame的一个盲点

自适应高度其实原理很简单，获取目标页面的高度值，用这个值设置主页面的iframe的高度，就这么简单。但这里涉及到关于获取目标页面元素时，不同浏览器间的兼容问题。

首先，让我们拿到iframe元素：

< iframe id = "myFrame" src = "" > < / iframe>   < script type = "text/javascript" >   var myFrame = document . getElementById ( "myFrame" ) ; < / script >

接下来，就是用myFrame去获取目标页面的高度了。在Firefox下，用myFrame.document是会出错的，必须用 myFrame.contentWindow.document，这样就能兼容IE7和FF了。这是很重要的一点，但这个网上都有说，地球人都知道。

var doc = myFrame. contentWindow . document ;

但是接下来有一点，是到目前为止很多地球人都不知道的，就是调用doc.getElementById()去获取目标页面的元素时，有时会得到null？！这到底是为什么呢？我把id名都检查了几百遍了，没错啊，为什么就是null呢？

盲点就在这里！其实，不是这里的JS的问题，也不是什么id的问题，问题的关键在于目标页面的载入！ 调用doc.getElementById()得到null，是因为该语句在目标页面尚未载入完成时就执行了，此时当然找不到目标页面的元素啦～～

解决方法：
在目标页面载入完成后才对其进行操作。

< iframe id = "myFrame" src = "" οnlοad="resize()" > < / iframe> < script type = "text/javascript" >     function resize( ) {         var myFrame= document. getElementById( "myFrame" ) ;         if ( myFrame . contentWindow. document) {              myFrame . height = myFrame . contentWindow. document. getElementById( "contentDiv" ) . scrollHeight + 24;         }     } < / script >

这正好符合了IFrame自适应高度的要求，把重设高度的代码写到resize()方法里，这样每次目标页面改变后都会自动重设高度了。