跨域解决方案
跨域:只要协议、域名、端口有任何一个不同,都被当作是不同的域。
1、通过document.domain跨域
用于主域相同,子域不同的跨域场景
eg:
1)父窗口(http://www.domain.com/a.html)
<iframe id="iframe" src="http://child.domain.com/b.html"></iframe>
<script>
document.domain = 'domain.com';
var user = 'admin'
</script>
2)子窗口(http://child.domain.com/b.html)
<script>
document.domain = 'domain.com';
//获取父窗口中变量
alert('get js data from parent --->' + window.parent.user);
</script>
2、通过location.hash跨域
因为父窗口可以对iframe进行URL读写,iframe也可以读写父窗口的URL,URL有一部分被称为hash,就是#号及其后面的字符,它一般用于浏览器锚点定位,Server端并不关心这部分,应该说HTTP请求过程中不会携带hash,所以这部分的修改不会产生HTTP请求,但是会产生浏览器历史记录。此方法的原理就是改变URL的hash部分来进行双向通信。
每个window通过改变其他 window的location来发送消息(由于两个页面不在同一个域下IE、Chrome不允许修改parent.location.hash的值,所以要借助于父窗口域名下的一个代理iframe),并通过监听自己的URL的变化来接收消息。这个方式的通信会造成一些不必要的浏览器历史记录,而且有些浏览器不支持onhashchange事件,需要轮询来获知URL的改变,最后,这样做也存在缺点,诸如数据直接暴露在了url中,数据容量和类型都有限等。下面举例说明:
假如父页面是baidu.com/a.html,iframe嵌入的页面为google.com/b.html(此处省略了域名等url属性),要实现此两个页面间的通信可以通过以下方法。
a.html传送数据到b.html;
a.html下修改iframe的src为google.com/b.html#paco;
b.html监听到url发生变化,触发相应操作。