通过XHR实现Ajax通信的一个主要限制，来源于跨域安全策略。解决跨域总结了几下几种方式：
一、跨源资源共享（CORS）
在发送请求时，请求页面的源信息（协议、域名和端口）为：http://www.baidu.com
如果服务器认为这个请求可以接受，就在后台代码中设置Access-Control-Allow-Origin的值为 http://www.baidu.com（如果服务器认为任何请求都可以接受就设置为“*”）
二、JSONP
JSONP跨域的原理：
通过动态创建一个script标签，script标签不受同源策略（CORS）限制，调用服务器端js脚本，服务器会返回一个用传过去的回调函数名包裹着服务器返回的json数据的函数执行，来执行相应的函数。
用原生js模拟jquery封装的jsonp：
var $ = {}; $.ajax = function(param){ var url = param.url; var success = param.success; var callback = param.jsonpCallback; //callback是在全局作用域执行的 window[callback] = function(data) { success(data); } var script = document.createElement("script"); script.src = url + "&callback=" + callback; document.getElementsByTagName("head")[0].appendChild(script); }
注： JSONP仅适用于HTTP的GET请求
JSONP有两点不足：
1、JSONP是从其他域中加载代码执行。如果其他域不安全，很可能会在响应中夹带一些恶意代码，而此时除了完全放弃JOSNP调用之外，没有办法追究
2、要确定JSONP请求是否失败应不容易
三、图像Ping(使用img标签)
一个网页可以从任何网页中加载图像，不用担心跨域不跨域。
图像Ping是与服务器进行简单、单向的跨域通信的一种方式。请求的数据是通过查询字符串形式发送的，而响应可以是任意内容，但通常是像素图或204响应。通过图像Ping,浏览器得不到任何具体的数据，但通过监听load和error事件，能知道响应什么时候接收到。
来看下面的例子：
var img = new Image(); img.onload = img.onerror = function() { alert("Done!"); }； img.src = "http://www.example.com/test?name=Nicholas";
这里创建了一个Image的实例，然后将onload和onerror事件处理程序指定为同一个函数。这样无论是什么响应，只要请求完成，就能得到通知。
注：图像Ping最常用于跟踪用户点击页面或动态广告曝光次数。
图像Ping有两个主要的缺点：
1、只能发送GET请求
2、无法访问服务器的响应文本
四、window.postMessage和iframe
window.postMessage的功能是允许程序员跨域在两个窗口或者frames间发送数据信息。基本上，它就像是跨域的Ajax，但不是浏览器跟服务器之间交互，而是在两个客户端之间通信。除了IE6、IE7之外的所有浏览器都支持这个功能。
比较重要的事件:
source - 消息源，消息的发送窗口或者iframe
origin - 消息源的URI（可能包含协议、域名和端口），用来验证数据源
data - 发送方发送给接收方的数据
注：尽管Internet Explorer8和Internet Explorer9都实现了postMessage API，但它们也有一些局限性。最明显的一点就是它们只允许向iframe元素发送消息。如果尝试向特定的窗口或选项卡发送消息，都会提示“No such interface supported”。
示例：
页面A.html在webstorm里，domain="http://localhost:9090"
页面B.html在eclipse里，domain = "http://localhost:8080"
示例一：
A页面里的iframe嵌套B页面，A页面给B页面（外面给里面）发送内容，B页面给A页面返回内容，代码如下：
A.html代码如下:
<head lang="en">
<meta charset="UTF-8">
<title>A给B发送</title>
</head>
<body>
A-receive:<span id="receive"></span>
<button onclick="send()">点击</button>
<iframe id="myIframe" src="http://localhost:8080/col/baidu-demo/html/receive1.html" frameborder="0"></iframe>
<script>
`
var domain = "http://localhost:8080";
var message = 'hello,B';
var iframe = document.getElementById("myIframe").contentWindow;
function send() {
iframe.postMessage(message, domain);
}
window.addEventListener('message', function(event) {
if(event.origin != "http://localhost:8080") return;
console.log('received:' + event.data, event);
document.getElementById("receive").innerHTML = event.data;
},false);
</script> </body> B.html代码如下： <head> <meta charset="UTF-8"> <title>A给B发送</title> </head> <body> <div>hello</div> B-receive:<span id=receive></span> <script>
var domain = "http://localhost:9090";
window.addEventListener('message', function(event) {
if(event.origin != "http://localhost:9090") return;
document.getElementById("receive").innerHTML = event.data;
event.source.postMessage("hello,A", domain);
},false);
`
</script>
</body>
示例二：
A页面里的iframe嵌套B页面，B页面给A页面（里面给外面）发送内容，代码如下：
A.html代码如下:
<head lang="en">
<meta charset="UTF-8">
<title>B给A发</title>
</head>
<body>
A-receive:<span id="receive"></span>
<iframe id="myIframe" src="http://localhost:8080/col/baidu-demo/html/receive.html" frameborder="0"></iframe>
<script>
window.addEventListener('message', function(event) { if(event.origin != "http://localhost:8080") return; console.log('received:' + event.data, event); document.getElementById("receive").innerHTML = event.data; },false);
</script>
</body>
B.html代码如下:
<head>
<meta charset="UTF-8">
<title>给A发</title>
</head>
<body>
<div>hello</div>
<button onclick="send()">点击</button>
<script>
var domain = "http://localhost:9090"; var message = 'hello,A'; console.log('blog.local:sending message:' + message); function send() { parent.postMessage(message, domain); }
</script>
</body>
示例三：
A页面打开B页面，A页面给B页面发送内容，B页面给A页面返回内容
A.html代码如下：
<head lang="en">
<meta charset="UTF-8">
<title>A给B发</title>
</head>
<body>
A-receive:<span id="receive"></span>
<button onclick="send()">点击</button>
<script>
`
var domain = "http://localhost:8080";
var message = 'hello,B';
var openPage = window.open("http://localhost:8080/col/baidu- demo/html/receive2.html");
function send() {
openPage.postMessage(message, domain);
};
window.addEventListener('message', function(event) {
if(event.origin != "http://localhost:8080") return;
document.getElementById("receive").innerHTML = event.data;
},false);
</script> </body> B.html代码如下： <head> <meta charset="UTF-8"> <title>A给B发</title> </head> <body> <div>hello</div> B-receive:<span id=receive></span> <script>
var domain = "http://localhost:9090";
window.addEventListener('message', function(event) {
if(event.origin != "http://localhost:9090") return;
document.getElementById("receive").innerHTML = event.data;
window.opener.postMessage("hello,A",domain);
},false);
`
</script>
</body>
参考文献：
http://www.webhek.com/window-postmessage-api/
《JavaScript高级程序设计》（第三版）
网友评论