子iframe页面如何跨域调用主页面的函数?
如果仅仅是二级域名不同,可以通过指定 document.domain = “xxx.com”; 来共享权限.
但如果是完全不同的两个域呢,一直以来都认为是实现不了的.
前段时间和淘宝项目合作的时候,发现他们可以做到,仔细研究了一下.原来是这样的.
当然前提条件是可以有两个域的控制权限.
情况如下,以下代码在页面A:
<script>
function waiting4Callback(_p)
{
alert(_p)
}
</script>
<iframe id="IFrameMain" marginWidth=0 marginHeight=0 src="跨域页面B" frameBorder=0 scrolling="no" width="1000" height="500"></iframe>
function waiting4Callback(_p)
{
alert(_p)
}
</script>
<iframe id="IFrameMain" marginWidth=0 marginHeight=0 src="跨域页面B" frameBorder=0 scrolling="no" width="1000" height="500"></iframe>
如果你尝试在跨域页面B里调用:
window.parent.waiting4Callback("hello!");
结果,明显是不可以的.
这时,解决方法是先在页面A所在的域下放一个页面C,就叫 proxy.html 好了,代码如下:
<script type="text/javascript">
window.parent.parent.waiting4Callback(window.location.hash.substring(1));
</script>
window.parent.parent.waiting4Callback(window.location.hash.substring(1));
</script>
这时候window.parent.parent就是页面A了,且A,C之间不跨域.
然后,在页面B里面再iframe一次页面C.代码如下:
<iframe id="ProxyWin" name="ProxyWin" marginWidth=0 marginHeight=0 src="" frameBorder=0 width="0" scrolling=0 height="0"></iframe>
这时候,页面B就可以通过iframe页面C来调用页面A的函数并传递参数了,这么写:
document.getElementById("ProxyWin").src = "页面C地址" + "?r="+Math.random()+"#"+"要传递的参数";
页面C好可怜,背叛了页面A不说,还要被页面B不停的重刷,刷到完全失去自我,就为了取个hash.
页面C说,我取的不是hash,是寂寞……