前端跨域方法

同源策略：它是由Netscape提出的一个著名的安全策略。现在所有支持JavaScript 的浏览器都会使用这个策略。所谓同源是指，域名，协议，端口相同。

跨域：跨域，指的是浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的，是浏览器对javascript施加的安全限制。

不受同源策略限制：①script标签的src属性；②img标签的src属性；③iframe标签的src属性；④link的href属性……

解决跨域的方法：①JSONP；②CORS(跨域资源共享)；③window.name；④document.domain；⑤postMessage；⑥……

JSONP
原理：<script>是可以跨域的，而且在跨域脚本中可以直接回调当前脚本的函数。
限制：需要创建一个DOM对象并且添加到DOM树，只能用于GET方法

function handle(res){ console.log(res);}var script = document.createElement('script');script.src = 'http://chunling.com/json/?callback=handle';document.body.insertBefore(script,document.body.fistChild);

CORS
原理：实现CORS通信的关键是服务器。只要服务器实现了CORS接口，就可以跨源通信。服务器设置Access-Control-Allow-OriginHTTP响应头之后，浏览器将会允许跨域请求。
限制：CORS需要浏览器和服务器同时支持。目前，所有浏览器都支持该功能，IE浏览器不能低于IE10。

window.name
原理：window对象有个name属性，该属性有个特征：即在一个窗口(window)的生命周期内,窗口载入的所有的页面都是共享一个window.name的，每个页面对window.name都有读写的权限，window.name是持久存在一个窗口载入过的所有页面中的，并不会因新页面的载入而进行重置。
限制：window.name的值只能是字符串的形式，这个字符串的大小最大能允许2M左右，具体取决于不同的浏览器，但一般是够用了。
a.html页面

<script>    window.name = "{'name':'Jack','age':18}";</script>

另一个域的b.html页面

<script>    console.log(window.name);</script>

document.domain
原理：相同主域名下不同子域页面，通过设置document.domain让他们同域
限制：这两个域名必须属于同一个基础域名，而且所用的协议，端口都要一致，否则无法利用document.domain进行跨域，即只适用于跨子域，不适用于跨父域

http://qingyu.com/example
http://wu.qingyu.com/example
两个页面跨域，需同时设置document.domain = ‘qingyu.com’;

postMessage
原理：HTML5允许窗口之间发送消息
限制：浏览器需要支持HTML5，获取窗口句柄后才能相互通信

不同与的a与b页面
a页面

<script> function onload(){  var iframe = document.getElementById('iframe');  var win = iframe.contentWindow;  win.postMessage('我是来自页面a的信息','*'); }</script><iframe id="iframe" src="b页面" onload="onload()"><iframe/>

b页面

<script> window.onmessage = function(e){  e = e || event;  console.log(e.data); }</script>