ifram跨域

有时候父页面需要和子页面进行数据交互，但是如果子页面和父页面不同源，那么这个时候就会出现跨域问题。

 

1.hash

一般通过改变当前页面的location来附加上需要传递的数据，然后另外的页面截取hash值来获得数据。

// 利用hash，场景是当前页面 A 通过iframe或frame嵌入了跨域的页面 B

// 在A中伪代码如下：

var B = document.getElementsByTagName('iframe');

B.src = B.src + '#' + 'data';

// 在B中的伪代码如下

window.onhashchange = function () {

var data = window.location.hash;

};

页面域关系： 

 

a.html所属域A：www.A.com

b.html所属域B：www.B.com

问题本质:

js对跨域iframe访问问题,因为要控制a.html中iframe的高度和宽度就必须首先读取得到b.html的大小,A、B不属于同一个域,浏览器为了安全性考虑，使js跨域访问受限,读取不到b.html的高度和宽度.

 

2.window.name

window.name比较麻烦，需要一个中间商赚差价。

再本页面设置window.name，然后进行跳转，新的页面已让能够读取到window.name

现在我们有3个页面，a和b和c，a和c是同源网站，b是被a用iframe包起来。

b加载自己的数据，最后把数据堆积到window.name上面，然后跳转手动修改a中的iframe的src，从b变成c，这样子就避免了iframe不能操控非同源的问题。

但是由于 a.html 页面和该页面 iframe 的 src 如果不同源的话，则无法操作 iframe 里的任何东西，所以就取不到 iframe 的 name 值，所以我们需要在 b.html 加载完后重新换个 src 去指向一个同源的 html 文件，或者设置成 'about:blank;' 都行，这时候我只要在 a.html 相同目录下新建一个 c.html 的空页面即可。如果不重新指向 src 的话直接获取的 window.name 的话会报错

总结：a.html先让iframe指向b.html，然后b.html数据加载完毕，复制到window.name之后

a.html控制iframe指向c.html，这个时候由于window.name还存在，而且c和a同源，故能读取到b附加在window.name上面的数据。

 

3.postMessage

postMessage就比较简单方便了。

a.html

获取到ifrmes，第0个即为当前页面的子页面，然后postMessage过去

自个注册一个message事件，用来接受子页面传递过来的数据