那些同域 或是跨小域同大域的iframe高度自适应 很多人讲过了
一般也尽量避免用iframe 但是实际项目里就是有很多迫不得已 还迫不得已的跨大域iframe 很无奈呀
先说明下 这个方法涉及到页面合作 对于那些偷偷引别人页面的不与支持。。。。
网上散播最广的就是用iframe中介代理的方法了
当然这个方法有很很多的缺点 但是着实也没别的办法 先忍了用用
先是准备个作为代理的页面
就是原页面 A
A中一个iframe嵌套跨大域页面 B
然后是个与A同域的页面 C 放在B的iframe中
A与B不能通信 B与C不能通信 但是A与C可以通信 B可以偷偷告诉点C什么
目的是 让A知道B的高度 从而可以根据这个高度值设置iframe的高度 进而实现高度自适应
现实是 只有B知道自己的高度 B不能告诉A 但有手段透露给C C可以告诉A
所以方案是 B得到自己的高度值 设给自己嵌套C的iframe的src属性
C得到自己的location之后 设置A中iframe的高度
/**A页面嵌入iframe B A与B异域 B页面中嵌入与A同域iframe C 用来记录B的页面高度***/
/**
*A
**/
<iframe id="ifrm" name="ifrm" frameborder="0" width="768" height="140" scrolling="no" src="http://fe.zuozuo.com/~li/tt.html" marginwidth="0" marginheight="0" hspace="0" style="">
</iframe>
/**
*B iframe 页面嵌入的iframe添加 下面的代码 注意文档头<!DOCTYPE html>
**/
<iframe id="iframeC" name="iframeC" src="" width="0" height="0" style="display:none;" ></iframe>
<script type="text/javascript">
function sethash(){
var hashH =document.body.clientHeight + (typeof (document.body.clientTop) == 'number' ? document.body.clientTop * 2 : 0);
urlC = "http://localhost/lemma/agent.html";
document.getElementById("iframeC").src=urlC+"#"+hashH;
}
window.οnlοad=sethash;
</script>
/**
*C iframe
**/
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>iframe中介页面</title>
</head>
<body>
<script>
function pseth() {
var iObj = parent.parent.document.getElementById('ifrm');
iObjH = parent.parent.frames["ifrm"].frames["iframeC"].location.hash;
iObj.style.height = iObjH.split("#")[1]+"px";
}
pseth();
</script>
</body>
</html>
在处理这个逻辑的时候各浏览器的表现还较为可爱
但是 B页面计算高度的时候出了很多意外
从document.documentElement.scrollHeight 到 document.body.scrollHeight 最后到 document.body.clientHeight
真的是很纠结 。。。。。。。
如果是普通的计算页面高度没必要这么折腾 主要是往iframe里一放就麻烦了
有空专门整理下这部分。。。。。。
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
