从上面这个Demo可以看到,除IE浏览器外,别的浏览器计算出来的都是iframe的高度,即CSS里设置的#frame_content_parent{ height:1800px; }。而IE计算出来的是iframe所引用页面的实际高度。
#frame_content_parent{ height:1800px; } (function(){ var $ = YAHOO.util.Dom, frame = $.get("frame_content_parent"); function reSetIframe(){ var frameContent = frame.contentWindow.document, bodyHeight = Math.max (frameContent.documentElement.scrollHeight, frameContent.body.scrollHeight); if (bodyHeight != $.getStyle(frame, "height")){ $.setStyle(frame, "height", bodyHeight + "px"); } } if(frame){ $.setStyle(frame,"height","auto"); setInterval(reSetIframe,300); } })();
跨域
这里提供一个Iframe代理的方法,简单地说一下原理。假设有3个页面,分别是主页面A.html,字页面B.html,代理页面C.html。其中A与B是跨域的,而A和C是同域的。它们的关系:A包含B,B包含C。很显然A和B,以及B和C,因为跨域不能相互通信,而A和C同域,可以相互通信。为此我们就想到让C页面告诉A页面,B页面到底有多少高。因为B和C也是跨域的不能相互通信,所以想在C页面中,直接window.parent.document.body.scrollHeight这样是行不通的,所以我们只能让B页面自己计算自身的高度,然后通过某种方法告诉C页面,再由C页面告诉A页面。这里的一个方法就是在B页面生成一个Iframe节点,然后设置它的src属性,在这个地址上附加一个参数,即B页面计算出来的高度,然后C页面就可以通过window.location获取这个地址栏中的地址,提取出高度值,通过window.top找到A页面,设置A页面的Iframe的高度。基本的原理就是这样,看代码吧:
DEMO
//B页面脚本 //任务:计算其实际高度,然后生成一个iframe节点,将高度作为代理页面C的地址的一部分赋值给Src属性 (function(){ var agent_iframe = document.createElement("iframe"), b_height = Math.max(document.documentElement.scrollHeight,document.body.scrollHeight); agent_iframe.src = "http://demo.zhouqicf.com/js/2010/iframe_height/agent_iframe_once.html#" + b_height; document.body.appendChild(agent_iframe); agent_iframe.style.display = "none"; })();
//C页面脚本 //任务:获取请求地址中的高度值,将其赋值给A页面的Iframe的高度 window.top.document.getElementById("frame_content_parent").height = parseInt(window.location.hash.substring(1),10);
出处:口碑网UED Team
责任编辑:bluehearts
上一页 三谈Iframe自适应高度 [1] 下一页 三谈Iframe自适应高度 [3]
◎进入论坛网页制作、WEB标准化版块参加讨论,我还想发表评论。
|