前几天做公司和开心网合作项目的时候 碰到iframe 跨域自适应的问题?
刚开始很迷惑 开心网那边技术工程师给我发了一段这样子的代码
<body onload="javascript: setHeight();">
<script>
function setHeight(){
?? ?var dHeight = document.documentElement.scrollHeight;
?? ?var t = document.createElement("div");
?? ?t.innerHTML = '<iframe id="kxiframeagent"
src="http://xxxx.kaixin001.com/xxx/xxx.html#'+dHeight+'"
scrolling="yes" height="0px" width="0px"></iframe>';
?? ?document.documentElement.appendChild(t.firstChild);
}
</script>
我想着跨域如何解决啊!后来去网上搜索了一下子? 恍然大悟
具体如下 我是复制过来了 大家重点理解一下子它的实现思路 ：
?
?
iframe跨域自适应
问题:
A域名下的页面a.htm中通过iframe嵌入B域名下的页面b.html,由于b.html的大小等是不可预知而且会变化的,所以需要?a.htm中的iframe自适应大小.
问题本质?:
js的跨域问题,因为要控制a.htm中iframe的大小就必须首先读取得到b.html的大小,A、B不属于同一个域,js的访问受限,读取不到b.html的大小.
?
解决方案:
首先前提是A，B是合作关系,b.html中能引入A提供的js
?
首先a.html中通过iframe引入了b.html
Html代码
??? 1 .? < iframe?id = " aIframe " ?height = " 0 " ?width = " 0 " ????
??? 2 .?src = " http://www.b.com/html/b.html " ?frameborder = " no " ?border = " 0px " ?marginwidth = " 0 " ???
??? 3 .?marginheight = " 0 " ?scrolling = " no " ?allowtransparency = " yes " ? >< / iframe>??
< iframe?id = " aIframe " ?height = " 0 " ?width = " 0 " ??
src = " http://www.b.com/html/b.html " ?frameborder = " no " ?border = " 0px " ?marginwidth = " 0 " ?
marginheight = " 0 " ?scrolling = " no " ?allowtransparency = " yes " ? >< / iframe>
?
B在b.html中引入了A提供的js文件
Html代码
??? 1 .? < script?language = " javascript " ?type = " text/javascript " ?src = " http://www.a.com/js/a.js " >< / script>??
< script?language = " javascript " ?type = " text/javascript " ?src = " http://www.a.com/js/a.js " >< / script>
?该js首先读取b.html的宽和高,然后创建一个iframe,src为和A同一个域的中间代理页面a_proxy.html,吧读取到的宽和高设置到src的hash里面
Html代码
??? 1 .? < iframe?id = " iframeProxy " ??height = " 0 " ?width = " 0 " ??src = " http://www.a.com/html/a_proxy.html#width|height " ?style = " display:none " ? >< / iframe>??
< iframe?id = " iframeProxy " ??height = " 0 " ?width = " 0 " ??src = " http://www.a.com/html/a_proxy.html#width|height " ?style = " display:none " ? >< / iframe>
?a_proxy.html是A域下提供好的中间代理页面,它负责读取location.hash里面的width和height的值,然后设置与它同域下的a.html中的iframe的宽和高.
Js代码
??? 1 .? var ?pParentFrame? = ?parent.parent.document.getElementById( " aIframe " );??
??? 2 .? var ?locationUrlHash? = ???
??? 3 .??????????????????parent.parent.frames[ " aIframe " ].frames[ " iframeProxy " ].location.hash;???
??? 4 .?pParentFrame.style.width? = ?locationUrlHash.split( " # " )[ 1 ].split( " | " )[ 0 ] + " px " ;???
??? 5 .?pParentFrame.style.height? = ?locationUrlHash.split( " # " )[ 1 ].split( " | " )[ 1 ] + " px " ;??
var ?pParentFrame? = ?parent.parent.document.getElementById( " aIframe " );
var ?locationUrlHash? = ?
?????????????????parent.parent.frames[ " aIframe " ].frames[ " iframeProxy " ].location.hash;?
pParentFrame.style.width? = ?locationUrlHash.split( " # " )[ 1 ].split( " | " )[ 0 ] + " px " ;?
pParentFrame.style.height? = ?locationUrlHash.split( " # " )[ 1 ].split( " | " )[ 1 ] + " px " ;
?这样的话a.html中的iframe就自适应为b.html的宽和高了.
A域名下的页面a.htm中通过iframe嵌入B域名下的页面b.html,由于b.html的大小等是不可预知而且会变化的,所以需要?a.htm中的iframe自适应大小.
问题本质?:
js的跨域问题,因为要控制a.htm中iframe的大小就必须首先读取得到b.html的大小,A、B不属于同一个域,js的访问受限,读取不到b.html的大小.
?
解决方案:
首先前提是A，B是合作关系,b.html中能引入A提供的js
?
首先a.html中通过iframe引入了b.html
Html代码
??? 1 .? < iframe?id = " aIframe " ?height = " 0 " ?width = " 0 " ????
??? 2 .?src = " http://www.b.com/html/b.html " ?frameborder = " no " ?border = " 0px " ?marginwidth = " 0 " ???
??? 3 .?marginheight = " 0 " ?scrolling = " no " ?allowtransparency = " yes " ? >< / iframe>??
< iframe?id = " aIframe " ?height = " 0 " ?width = " 0 " ??
src = " http://www.b.com/html/b.html " ?frameborder = " no " ?border = " 0px " ?marginwidth = " 0 " ?
marginheight = " 0 " ?scrolling = " no " ?allowtransparency = " yes " ? >< / iframe>
?
B在b.html中引入了A提供的js文件
Html代码
??? 1 .? < script?language = " javascript " ?type = " text/javascript " ?src = " http://www.a.com/js/a.js " >< / script>??
< script?language = " javascript " ?type = " text/javascript " ?src = " http://www.a.com/js/a.js " >< / script>
?该js首先读取b.html的宽和高,然后创建一个iframe,src为和A同一个域的中间代理页面a_proxy.html,吧读取到的宽和高设置到src的hash里面
Html代码
??? 1 .? < iframe?id = " iframeProxy " ??height = " 0 " ?width = " 0 " ??src = " http://www.a.com/html/a_proxy.html#width|height " ?style = " display:none " ? >< / iframe>??
< iframe?id = " iframeProxy " ??height = " 0 " ?width = " 0 " ??src = " http://www.a.com/html/a_proxy.html#width|height " ?style = " display:none " ? >< / iframe>
?a_proxy.html是A域下提供好的中间代理页面,它负责读取location.hash里面的width和height的值,然后设置与它同域下的a.html中的iframe的宽和高.
Js代码
??? 1 .? var ?pParentFrame? = ?parent.parent.document.getElementById( " aIframe " );??
??? 2 .? var ?locationUrlHash? = ???
??? 3 .??????????????????parent.parent.frames[ " aIframe " ].frames[ " iframeProxy " ].location.hash;???
??? 4 .?pParentFrame.style.width? = ?locationUrlHash.split( " # " )[ 1 ].split( " | " )[ 0 ] + " px " ;???
??? 5 .?pParentFrame.style.height? = ?locationUrlHash.split( " # " )[ 1 ].split( " | " )[ 1 ] + " px " ;??
var ?pParentFrame? = ?parent.parent.document.getElementById( " aIframe " );
var ?locationUrlHash? = ?
?????????????????parent.parent.frames[ " aIframe " ].frames[ " iframeProxy " ].location.hash;?
pParentFrame.style.width? = ?locationUrlHash.split( " # " )[ 1 ].split( " | " )[ 0 ] + " px " ;?
pParentFrame.style.height? = ?locationUrlHash.split( " # " )[ 1 ].split( " | " )[ 1 ] + " px " ;
?这样的话a.html中的iframe就自适应为b.html的宽和高了.