iframe自适应高度加载脚本，解决不能使用onload事件问题（兼容）

这几天公司给客户做了一个页面（使用iframe），客户提出不同用户进入显示不同的内容，接着iframe高度问题就来了，设置高度100%完全没有用。然后在网上各种收集解决办法，一开始网上的方法还真的有作用，但是实际应用发现在iframe框架中有一个模块加载很慢导致页面一开始就显示出来一小部分，还有就是代码不兼容谷歌浏览器，经过两天的各种虐心总算是解决了问题，特意来给大家分享一下。

第一步：父页面index.jsp和子页面sub.jsp，首先两个页面中都要加入<script type="text/javascript" src="js/jquery.min.js"></script>文件，因为需要使用jquery。

第二步：
index.jsp中代码：

<script type="text/javascript">
var ua = navigator.userAgent.toLowerCase(),
UA = ua.match(/(opera|ie|trident|firefox|chrome|version)[\s\/:]([\w\d\.]+)?.*?(safari|version[\s\/:]|rv[\s?]([\w\d\.]+)|$)/)
|| [null, 'unknown', 0],
mode = (UA[1] == 'ie' || UA[1] == 'trident') && document.documentMode;
var Browser = this.Browser = {
extend: Function.prototype.extend,
name: (UA[1] == 'version') ? UA[3] : (UA[1] == 'trident' ? "ie" : UA[1]),
version: mode || parseFloat((UA[1] == 'opera' && UA[4]) ? UA[4] : UA[2])
};
Browser[Browser.name] = true;
Browser[Browser.name + parseInt(Browser.version, 10)] = true;

function checkFrame() {
//自适应高度方法
//检查iframe是否存在
if($("#content").contents().find("body").height()){
var iframeHeight = $("#content").contents().find("body").height();
$("#content").height(iframeHeight);
if(Browser.chrome){
//判断谷歌浏览器
var mainheight = $(this).contents().find("#div_test").height()+30;

$(this).height(mainheight);
}
}else{
setTimeout("checkFrame()", 200);
}
}
//可以在onload事件之前加载，checkFrame方法可以循环去查找是否完成iframe的加载，加载成功就可以赋值高度，可以在onload事件不能使用的时候解决问题。
$(document).ready(function(){

checkFrame();
});
</script>
页面中的iframe代码：
<iframe id="content" name="content" height="100%" width="100%" src="test.html"
marginwidth="1" marginheight="0" scrolling="no" border="0" frameborder="0" allowTransparency="true"></iframe>

第三步：
sub.jsp中代码：

<script type="text/javascript">
$(window.parent.document).find("#content").ready(function(){
//谷歌浏览器所要使用的代码
var main = $(window.parent.document).find("#content");
var mainheight = $(document).height()+30;
main.height(mainheight);
});
</script>
子页面中获取body高度在不同浏览器不一样，所以要在最外层使用div，然后获取div的高度。
<div class="main_1000" id="div_test">
内容展示部分
</div>

代码兼容性很好，或许没个人遇到问题不同，部分代码通用，大家可以借用部分内容。主要针对的就是不能使用onload事件的时候，还需要加载iframe的高度，还需要兼容IE、火狐、谷歌等浏览器问题。子页面代码在静态页面中脚本会报错，要在程序中使用正常。