js跨域问题之跨域iframe自适应大小

最新推荐文章于 2022-12-13 11:45:20 发布

C55559999

最新推荐文章于 2022-12-13 11:45:20 发布

阅读量160

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/qgd87/archive/2010/07/16/1778980.html

版权

前几天做公司和开心网合作项目的时候碰到iframe 跨域自适应的问题

刚开始很迷惑开心网那边技术工程师给我发了一段这样子的代码

<body οnlοad="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的宽和高了.

参考：http://zhhphappy.javaeye.com/blog/426689

转载于:https://www.cnblogs.com/qgd87/archive/2010/07/16/1778980.html

C55559999

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js跨域问题之跨域iframe自适应大小

前几天做公司和开心网合作项目的时候碰到iframe 跨域自适应的问题刚开始很迷惑开心网那边技术工程师给我发了一段这样子的代码<body onload="javascript: setHeight();"><script>function setHeight(){ var dHeight = document.documentE...
复制链接

扫一扫