jquery实现Iframe高度自适应(兼容多浏览)

在实际项目中，很多地方可能由于历史原因不得不去使用iframe，从而再次开发的工作量!

随之而来的就是在实际使用iframe中，会遇到iframe高度的问题，由于被嵌套的页面长度不固定而显示出来的滚动条，不仅影响美观，还会对用户操作带来不便。于是自动调整iframe的高度就成了重点。

飞信空间引入了强大的jQuery，所以我索性用了jQuery来实现根域相同情况下iframe的高度自适应。

HTML主页面之iframe代码如下，注意加ID：

<iframe id="frame_con" src="bb.html" frameborder=0 scrolling=no style="margin-left:0px;margin-top:-3px;width:785px;height:550px;float:right;"></iframe>

bb.html中JS代码如下：

//引入jQuery
<script src="http://res.func.fetionpictest.com/js/public/jquery-1.3.2.min.js?2011122701" type="text/javascript"></script>
<script type="text/javascript">
	  //document.domain = "fx-func.com";//指向根域
         $(window.parent.document).find("#frame_con").load(function(){//绑定事件
			var main = $(window.parent.document).find("#frame_con");//找到iframe对象
			var thisheight = $(document).height()+30;//获取页面高度
			main.height(thisheight < 500 ? 500 : thisheight);//为iframe高度赋值如果高度小于500，则等于500，反之不限高，自适应
		});
     </script>

另一种方法就是把JS放到页面aa.html,既和iframe同样页面

$("#frame_con").load(function(){
var thisheight = $(this).contents().find("body").height()+30;
$(this).height(thisheight < 500 ? 500 : thisheight);
});

两种方法皆可使用，视情况而定！我使用了第二种方法，已经OK