js 中的跨域

同源策略

同源定义

协议，主机，端口号三者完全相同，称为同源。

限制范围

如果两个域非同源，则有以下限制

1. cookie 无法读取
2. dom 无法获得
3. ajax 请求无法发送

跨域

js 中实现跨域请求，有以下几种方式

在iframe中跨域

两个窗口一级域名相同

通过设置 document.domian 为一级域名，可以跨域

两个窗口完全不同源

可以有以下三种方式解决跨域问题

1. url.hash
   url.hash是指url中 #后面的部分
   父窗口把信息写入子窗口的 url 片段

var src=sonUrl+'#'+data;
document.getElementById('myiframe').src=src

子窗口监听信息

window.onhashchage=checkMessage();
function checkMessage(){
var message=window.location.hash
 }

子窗口向父窗口传递信息

function sendMessage(msg){
var hash=msg
parent.location.href=parentUrl+'#'+hash
}

2. window.name
   父窗口打开一个不同源的网站，将信息写入 window.name 中

window.name=data

子窗口跳回一个与主窗口同域的网站

location='http://parenUrl/index.html'

主窗口可以读取子窗口的 window.name 了

data=document.getElementByName('myiframe').contenWindow.name

3. window.postMessage
   otherWindow.postMessage(message,targetOrigin) 是html5新引进的函数
   otherWindow 是对接受信息的 window 的引用
   message 是所要发送的数据
   targetOrigin 是指接收消息的源，用于限制 otherWindow
   举例来说，父窗口 a.com ,向子窗口 b.com 发送消息

var popup=window.open('b.com','title')
popup.postMessage('hello world','b.com')

子窗口像父窗口发送消息

window.opener.postMessage('nice to meet you','a.com')

子窗口和父窗口都可以通过 message 时间监听对方消息

window.addEventListener('message', function(e) { console.log(e.data);},false);

在 AJAX中跨域

在 AJAX 中跨域有以下几种方式

1. jsonp
   基本思想是跨域引用 js 脚本文件
   jsonp由两部分组成，回调函数和数据。回调函数就是当响应到来时在页面中调用的函数，数据就是传入回调函数中的json数据。

2. webSocket
   一种通信协议，不实用同源策略，只要服务器支持就可以跨域。

3. cores
   只要服务器实现了cors接口就可以跨域通信