解决iframe跨域高度自适应问题

前期因项目需要解决iframe跨域高度自适应问题，但在网上找了许久也没找到能用的，几乎都是转载的，也没经过测试，当时就不了了知了。最近该项目又要实现这种功能，没办法，硬着头皮也要上呀。通过查阅资料及加上自己的理解，总算实现了这个功能，在这暂存以备后查。

交待下项目背景。两个独立的项目A与B且为独立的域名就叫做 www.abc.com与www.efg.com吧。在A项目中要调用B项目的一个页面并且被嵌入的页面中有链接的，点击链接会跳转到新页面，所以页面高度就会变化，需要的效果就是iframe的高度根据页面的内容自动调整。

页面准备：共需要三个页面，A项目两个页面，一个是要嵌入B项目页面的框架页面，叫iframe页面吧，另个是中间代理页面，叫agent页面吧；B项目需要一个页面，那就是要被iframe页面嵌套的页面，就叫content页面吧。

实现方法：在content页面中加上一段JavaScript代码，主要功能就是获取当前页面的高度，然后在该页面中插入个隐藏的iframe去访问agent页面，并在链接地址后加上content页面高度，看代码吧：

$(function(){ var h = $(document.body).outerHeight(true); $("body").append('<iframe style="display:none;" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://www.abc.com/agent.html?t='+ new Date().getTime()+'#height=' + h + '" ></iframe>'); }); 

相关JavaScript代码用jQuery写的。用js代码生成的隐藏iframe访问A项目的agent页面，在后面有两个参数，t为当前时间，目的是为了避免浏览器缓存，#height增加锚点的方法是为了不刷新页面。我们再来看agent页面的代码：

var hash = window.location.hash.slice(1); if (hash && /height=/.test(hash)) { window.top.location.hash = "#" + hash; } 

通过对访问地址的处理可以得到#height的高度值，然后再将该值加在框架地址栏中，因为agent与iframe页面处于同域下所以没有跨域的问题。接下来我们要在iframe页面中对框架的高度进行处理：

var iframe = document.getElementById("iframe");//iframe的ID var iframeHeight = function() { var hash = window.location.hash.slice(1); if (hash && /height=/.test(hash)) { iframe.height = hash.replace("height=", ""); } }; setInterval(iframeHeight, 500);  

iframe页面主要的功能就是从地址栏中读取#height的值，然后调整iframe高度，因为被嵌入页面content的页面是会变化的，所以每500毫秒就会检测下。目前在项目中实现的效果还是可以的。

2012-02-17更新：

据有些童鞋反应，在部分浏览器下或跨域时不能正常显示。今天都测了下，发现效果都还是可以的。

IETester模拟IE5-9均能正常显示。Chrome，Firefox也都是可以的。其他的暂时没测。

另：例子可以通过查看源文件知道，嵌入的iframe是在http://kinerli2.web16.7itt.com这个域名下的。而我们访问的例子是在http://okiner.cn这个域名下的。所以，跨域是没有问题的。

这个例子也仅限于两个站点自己都有管理权限的。如果没有管理权限的话，这种方法不适合。

 

例子访问地址：http://okiner.cn/demo/cross-domain/iframe.html

 

Demo源码下载：http://download.youkuaiyun.com/source/2982284