iframe自适应高度

有时候不可避免的要使用iframe,且iframe内容的高度是不一定的,所以在引用iframe的页面直接把高度写死是行不通滴,需要一个动态设置高度的解决方案。

具体又可以分为同域和跨域两种情况,同域就不讲了,本文主要解决 跨域,且主域域名不定的情况

 

解决方案一

首先因为iframe是跨域的,所以不能直接用JS来控制,只能通过一个中间代理,我们这里选择在iframe的页面(页面B)中加一个与iframe父页面(页面A)同域的页面(页面C);这样页面C就能和页面A进行无障碍的通讯了;因为页面B iframe 页面C,所以页面B可以改写页面C的href值;到这里大家应该看明白啥意思了,来张图说明下:

 

由于页面A的域名不一定,所以要在B中建立一个与A同域的iframe,必须在A中把hostname通过url传到页面B

var hosturl=location.hostname;
$('#frameB').attr('src','http://b.com/b.html?hostname='+location.hostname);

 

页面B要做的事情是,根据url中的hostname,创建frameC,与A同域,并且获取本页面高度,设置hash值

创建frameC



设置src,获取本页面高度,设置hash值

function sethash(){
var hosturl=parseQueryString('hostname');
height = document.documentElement.scrollHeight;
urlC = 'http://'+hosturl+'/c.html';
document.getElementById("iframeC").src=urlC+"#"+height;
}

 

页面C要做的事情就是根据hash中的height 设置frameB的高度

function  hashchange() {
var iObj = parent.parent.document.getElementById('iframeB');
iObjH = parent.parent.frames["iframeB"].frames["iframeC"].location.hash;
iObj.style.height = iObjH.split("#")[1]+"px";
}
hashchange();

 

 
这样就OK了,当然,这是非常简单的实现,对于要求比较高的,页面中有ajax导致页面高度随时会变的,可以用setInterval监听hash值的变化,如果变了就重新设置高度

这里代码就不写了

 

在网上还看到其他的解决方案,比如用about:blank和window.name来实现的,这个我还没验证过,待我验证了再来继续写其他解决方案。

 

 

参考文献

http://www.ccvita.com/376.html
http://www.honglei.net/?p=287
http://www.alloyteam.com/2012/08/lightweight-solution-for-an-iframe-cross-domain-communication/

One Response

  1. 晋文格墨说道:

    王子墨的博客好风骚啊