关于IFrame的一个盲点
时间：2008-07-29 来源：reniaL
弄IFrame，最经典的自适应高度问题，搞很久，最后才发现其实根本就没找对焦点。。
自适应高度其实原理很简单，获取目标页面的高度值，用这个值设置主页面的iframe的高度，就这么简单。但这里涉及到关于获取目标页面元素时，不同浏览器间的兼容问题。
首先，让我们拿到iframe元素：
|
<iframe id="myFrame" src=""></iframe>
<script type="text/javascript"> |
接下来，就是用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="" onload="resize()"></iframe>
<script type="text/javascript"> |
这正好符合了IFrame自适应高度的要求，把重设高度的代码写到resize()方法里，这样每次目标页面改变后都会自动重设高度了。
相关阅读 更多 +
