JavaScript实现iframe自动高度调整和不同主域名跨域
大家都知道Js有同源策略，就是主域名不同嵌套的iframe不允许Js通信的。
比如我有一个网站，网站中要嵌入其网站的页面。那么我可以使用iframe引用第三方网站的地址即可。
但是问题也来的iframe的高度是固定的不能与第三方网站很好的融合，又例如第三方网站使用了瀑布流插件，要滚动加载自动计算高度，那么先说跨域：iframe主域名不同跨域方法，假如网站A.com B.com A里面放入一个iframe引用了B.com，这种情况下B.com里面的Js是无法访问到A.com的。JS跨域必须是同源，就是同一个主域名，那肿么办呢？
我们可以在B.com中在引入一个iframe，暂且叫C吧这个iframe加载A.com中的一个网页。这样同源就有了B.com中的iframe中的网页就可以和A.com通讯了。下面只要B和C通讯，让C和A通讯就完成B->A通讯，这样当B高度变化时通知C，让C通知A把iframe高度调整。
B和C通讯，其实通过url地址就可以实现通讯了，B.comiframe设置为隐藏，改变src地址时候C就可以接收。
废话不说了上代码
A.com/index.html
<html>
<scriptsrc="{$smarty.const.STATIC_URL}/js/jquery-1.7.1.min.js"></script>
<script>
vartest=function(){
$('#h1').html('test');
}
</script>
<body>
<h1id="h1">nba.alltosun.net</h1>
<iframeid="ifm"width="760"height="100"src="http://***.sinaapp.com/"></iframe>
</body>
</html>
B.com/index.html
<html>
<head></head>
<body>
<h1>**.appsina.com</h1>
<buttonid="button">设置高度</button>
<divid="div"style="height:200px;display:none;"></div>
<scriptsrc="http://nba.alltosun.net/js/jquery-1.7.1.min.js"></script>
<script>
$(function(){
window.ifrH=function(e){
varsearchUrl=window.location.search;
varb=null;
vargetParam=function(url,param){
varq=url.match(newRegExp(param+"=[^&]*")),
n="";
if(q&&q.length){
n=q[0].replace(param+"=","");
}
returnn;
}
varf=getParam(searchUrl,"url"),
h=getParam(searchUrl,"ifmID"),
k=getParam(searchUrl,"cbn"),
g=getParam(searchUrl,"mh");
variframeId='testiframe';
variframe=document.getElementById(iframeId);
vardivId='alltosun';
if(!iframe){
variframe=document.createElement('iframe');
iframe.id=iframeId;
iframe.style.display="none";
iframe.width=0;
iframe.height=0;
document.body.appendChild(iframe);
}
if(e&&e.type=="onload"&&h){
b.parentNode.removeChild(b);
b=null;
}
if(!b){
b=document.createElement("div");
b.id=divId;
b.style.cssText="clear:both;"
document.body.appendChild(b);
}
varl=b.offsetTop+b.offsetHeight;
iframe.src=(decodeURIComponent(f)||
"http://*****/test2")+"&h="+l+"&ifmID="+(h||"ifm")+"&cbn=test"+"&mh="+g+"&t="+((+newDate()));
if(e&&e.type=="onload"){
window.onload=null;
}
}
window.onload=function(){
ifrH({type:"onload"});
}
//ifrH();
$('button').click(function(){
$('div').show();
ifrH();
})
})
</script>
</body>
</html>
C代理文件
<script>
varsearch=window.location.search,
getSearchParam=function(search,key){
varmc=search.match(newRegExp(key+"=([^\&]*)")),
ret="";
mc&&mc.length&&(ret=mc[0].replace(key+"=",""));
returnret;
},
//参数h
h=getSearchParam(search,"h"),
ifmID=getSearchParam(search,"ifmID"),
cbn=getSearchParam(search,"cbn"),
//宽高
mh=getSearchParam(search,"mh")||h,
isFunction=function(fn){
return!!fn&&!fn.nodeName&&fn.constructor!=String
&&fn.constructor!=RegExp&&fn.constructor!=Array
&&(/function/i).test(fn+"");
};
try{
if(parent&&parent.parent){
ifm=parent.parent.document.getElementById(ifmID);
ifm&&mh&&(ifm.height=mh);
fn=parent.parent[cbn];
isFunction(fn)&&fn.call();
ifm=null;
}
}catch(ex){
console.log(ex);
}
</script>