同源策略
同源定义
协议，主机，端口号三者完全相同，称为同源。
限制范围
如果两个域非同源，则有以下限制
- cookie 无法读取
- dom 无法获得
- ajax 请求无法发送
跨域
js 中实现跨域请求，有以下几种方式
在iframe中跨域
两个窗口一级域名相同
通过设置 document.domian 为一级域名，可以跨域
两个窗口完全不同源
可以有以下三种方式解决跨域问题
- 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
}
- window.name
父窗口打开一个不同源的网站，将信息写入 window.name 中
window.name=data
子窗口跳回一个与主窗口同域的网站
location='http://parenUrl/index.html'
主窗口可以读取子窗口的 window.name 了
data=document.getElementByName('myiframe').contenWindow.name
- 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 中跨域有以下几种方式
jsonp
基本思想是跨域引用 js 脚本文件
jsonp由两部分组成，回调函数和数据。回调函数就是当响应到来时在页面中调用的函数，数据就是传入回调函数中的json数据。webSocket
一种通信协议，不实用同源策略，只要服务器支持就可以跨域。cores
只要服务器实现了cors接口就可以跨域通信
