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

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的高度就可以了。





你可能感兴趣的:(iframe跨域自适应高度问题的解决方法)