前端跨域解决方案

跨域解决方案

跨域：只要协议、域名、端口有任何一个不同，都被当作是不同的域。

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发生变化，触发相应操作。