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

来源：互联网发布：java设计模式 pdf 编辑：程序博客网时间：2024/05/16 08:59

1.被包含iframe页面上加入一个隐藏的ifrmae：
<iframe id="iframeC" name="iframeC" src="" width="0" height="0" style="display:none;" ></iframe>

并加入js：
<script type="text/javascript">
function sethash(){
hashH = document.documentElement.scrollHeight;
urlC = "http://www.ccvita.com/usr/uploads/demo/iframe/agent.html"; //本域代理页面。
document.getElementById("iframeC").src=urlC+"#"+hashH;
}
window.onload=sethash;
</script>

2.在本域增加一个代理页面iframeHeightAgent.html,

< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><title>iframe中介页面</title></head>

<body>

<script>
function pseth() {
var iObj = parent.parent.document.getElementById('frame_content');
iObjH = parent.parent.frames["frame_content"].frames["iframeC"].location.hash;
iObj.style.height = iObjH.split("#")[1]+"px";
}
pseth();
</script>

</body>
</html>

3.在本域的包含页面：

<iframe id="frame_content" name="frame_content" src="iframe.html" width="100%" height="0"

scrolling="no" frameborder="0"></iframe>

<iframe src="${report.applyContentUrl }&userId=${user.id }&type=itsm" width="100%" height="0"

frameborder="0" scrolling="no"></iframe>

本域的包含页面通过iframe请求其它域的一个jsp页面，这时候其它域的web服务器会编译该jsp文件，执行1中

的js将其中的隐藏iframe的src指向本域的代理html页面同时将本jsp页面的高度值计算出来作为src属性的一部

分。接着产生的html输出会被加载到本域的主页面的iframe内，在加载的过程中其它域页面中的iframe会加重

src属性定义的本域的代理页面，在加载代理页面的时候，代理页面的js会在主页面环境下执行，该js获取主页

面的frame，然后获取主页面的iframe里面的子iframe的src属性上保存的一个高度值，最后将该高度值设置成

主页面的iframe的高度就可以了。