跨域iframe高度自适应方案
1. 解决思路:通过中转页面的HASH值来获取跨域iframe高度
如图:
详细思路:简单来说就是在B页面里创建一个和A同域的iframe C,让C和A之间可以通讯,以把B的高度传过去。
那么怎么传过去呢?在A页面直接取frames[ b ].frames[c].location.hash,可以取到hash值。B页面加载完成后,获取到B页面的高度并设置frame c的hash值,A页面获取frame c的hash值即可,并根据hash值设置frame B的高度。
A,C页面为包含iframe方的页面,B为要嵌入的第三方页面。C页面可以为任意页面,只要不是404即可。
2. 页面代码
A页面代码:
<iframe src="http://www.test.com/test_b.html" id="third_iframe" name="third_iframe" scrolling="no" frameborder="0"></iframe>
<script language="javascript">
$("#third_iframe").ready(function () {
var SetAutoHeight = function () {
try {
setTimeout(function () { SetAutoHeight(); }, 200);
var h = window.frames["third_iframe"].frames["frame_c"].location.hash.substring(1);
if (!!h) {
$("#third_iframe").height(h);
}
} catch (e) {
}
}
SetAutoHeight();
});
</script>
B页面代码:
<iframe id="frame_c" name="frame_c" src="http://www.test2.com/iframe.html" scrolling="no" frameborder="0"></iframe>
<script type="text/javascript">
window.onload = function () {
var height = document.body.scrollHeight || document.documentElement.scrollHeight;
document.getElementById("frame_c").src = document.getElementById("frame_c").src + "#" + height;
};
</script>
A,B页面代码放在body中即可,(注意:B页面iframe的name和ID一旦定好不可更改),C页面可以是网站的任意页面,保证能访问即可。
跨域iframe高度自适应方案:目前有1 条留言
发表评论
您还未登录,需要登录后才能发言
这是要解决跨域通信吗,一般只是在html5里面采用的
2012-09-12 07:51:32