设置好头信息之后，其他域就可以进行请求了。
使用"跨域资源共享"的前提，是浏览器必须支持这个功能，而且服务器端必须同意这种"跨域"。如果能够满足上面的条件，则代码的写法与不跨域的请求完全一样。
xhr.open('GET', ' ');
接下来介绍另外一种实时通信方式：
3、Cross-document messaging
跨文档信息通信。使用这个功能，只要获取到网页所在窗口对象的实例，不仅同原的web网页可以互相通信，也可以实现跨域通信。要想接受从其他窗口发送来的信息，必须对窗口对象的onmessage事件进行监听，其他窗口可以通过postmessage方法来传递数据，该方法使用两个参数：第一个参数为所发送的消息文本，但也可以是任何js对象，第二个参数为接收消息的对象窗口的url地址。
下面进行试验，主页面index.html代码如下：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <script type="text/javascript"> function sendIt(){ document.getElementById("otherPage").contentWindow .postMessage(//向子窗口发出请求 document.getElementById("message").value,//值 "http://127.0.0.1:8020"//目标域 ) } </script> <body> <iframe src="https://127.0.0.1:8020/test2/JS/jstest/Cross-document-messaging/other.html"></iframe> <br /><br /> <input type="text" value="" /> <input type="button" value="发送跨域消息" /> </body> </html>
窗口所引用页面other.html代码如下：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script type="text/javascript"> window.addEventListener("message",function(event){//通过onmessage监听 //将从父窗口传来的数据展现出来 document.getElementById("content").innerHTML+=event.data+"<br>"; },false); </script> </head> <body> 信息来自于另外一个域 <div> </div> </body> </html>
试验结果如下：
可以看到在81端口服务器中的index.html和8020端口的服务器中的other.html进行的通信。
完整代码如下：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <script type="text/javascript"> function sendIt(){ document.getElementById("otherPage").contentWindow .postMessage(//向子窗口发出请求 document.getElementById("message").value,//值 "http://127.0.0.1:8020"//目标域 ) } </script> <body> <iframe src="https://127.0.0.1:8020/test2/JS/jstest/Cross-document-messaging/other.html"></iframe> <br /><br /> <input type="text" value="" /> <input type="button" value="发送跨域消息" /> </body> </html>
CrossDocumentMessaging_index.html
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script type="text/javascript"> window.addEventListener("message",function(event){//通过onmessage监听 //将从父窗口传来的数据展现出来 document.getElementById("content").innerHTML+=event.data+"<br>"; },false); </script> </head> <body> 信息来自于另外一个域 <div> </div> </body> </html>