iframe 跨域自动适应高度

 

通过Google搜索ifram自动适应高度，结果将近2w多条，翻了十几页刨去大量的转载，有那么三五篇是原创的。而这几篇原创里面，基本上只谈到如何自适应静的东西，就是没有考虑到JS操作DOM之后，如何做动态同步的问题。另外，在兼容性方面，也研究的不彻底。看了看还是自己想办法写一个呗。

好了还是不废话了，直接转入话题吧.要想让他自动适应高度那么得到ifram里面的内容的高度是最重要的有了这个高度问题就迎刃而解了我们只需要在每次执行加载这个ifram页面的时候把它的高度抛到父级页面，父级页面通过获取到子页面的高度给fram标签的高度赋值，那么这个问题就搞定了.

好了看看具体实现吧:

1.计算内容的高度(子页面)使用jquey获取子页面内容的实际高度标识内容的div或者form随便指定一个Id如： id=content 然后，通过 jquery的attr属性计算出它的offsetHeight(实际高度);

var cHeight = $(”#content”).attr(’offsetHeight’);

无论你是列表带分页的还是静态的取出来的高度肯定没问题

2.调用父窗体的函数(子页面)parent.setframHeight(cHeight);千万不要忘记子页面调用父页面的方法要使用parent.

3.父页面通过jquery给mainframe标签的高度赋值

function setframHeight(value) {
$(”#mainframe”).css(”height”, value);
}

注意：
1.使用.attr(’offsetHeight’);计算实际高度不用需有样式的浮动要不然他算出的高度会是0或者auto 解决办法清除浮动

2.Javascript出于安全性考虑，是不允许跨域调用其他页面的对象的。当然网上处理的方法也很多简单的说一种document.domain。前提条件：两个页面同属于一个基础域（例如都是xxx.com，或是xxx.com.cn）；同一协议（例如都是http）；同一端口（例如都是80）。方法：设置两个页面的document.domain都设置为自己所在的基础域名。例子：aaa.xxx.com里面的一个页面需要调用bbb.xxx.com里的一个对象，则将两个页面的document.domain都设置为xxx.com，就可以了。

【转】原文http://www.cnblogs.com/keboo/archive/2010/03/16/1687531.html