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>