前端跨域技术之跨文档消息传输

跨文档消息传送，简称为XDM，指的是来自不同的域的页面间的传递消息。 如果两个网页不同源，就无法拿到对方的DOM。典型的例子是iframe窗口和window.open方法打开的窗口，它们与父窗口无法通信。

   比如,父窗口运行下面的命令，如果iframe窗口不是同源将会报错。
 
document.getElementById("iframe").contentWindow.document
   上面命令中，父窗口想获取子窗口的DOM，因为跨源导致报错。
   反之亦然，子窗口获取主窗口的DOM也会报错。
window.parent.document.body
   如果两个窗口一级域名相同，只是二级域名不同，那么设置document.domain属性，就可规避同源政策，拿到DOM。而 对于完全不相同的网站，目前有三种方法，可以解决跨域窗口的通信问题。
 
 (1) 片段识别符（fragment identifier）

   
 片段识别符指的是，URL的#号后面的部分，即hash部分，比如http://qq.com/x.html#fragment的#fragment。如果只是改变片段标识符，页面将不会重新刷新，父窗口可以把信息，写入子窗口的片段标识符。
 
var src = originURL+'#'+data;
 
document.getElementById('iframe').src = src;
  子窗口通过监听hashchange事件得到通知
 
window.onhashchange = checkMessage;
 
function checkMessage(){
 
var message = window.location.hash;
 
//...
 
}
 同样的，子窗口也可以改变父窗口的片段标识符。
 
parent.location.href = target+"#"+hash; 
 
 (2) window.name

     浏览器窗口有window.name属性。这个属性的最大特点是，无论是否同源，只要在同一个窗口里，前一个网页设置这个属性，后一个网页就可以读取它。
 父窗口先打开一个子窗口，载入一个不同源的网页，该网页将信息写入window.name属性。
 window.name = data;
 接着，子窗口跳回一个与主窗口同域的网址。
 location = 'http://parent.url.com/xxx.html';
 然后，主窗口就可以读取子窗口的window.name了。
 var data = document.getElementById('iframe').contentWindow.name;
 这种方法的优点是，window.name容量很大，可以放置非常长的字符串；缺点是必须监听子窗口window.name属性的变化，会影响网页性能。
(3) 跨文档通信API（Cross-document messaging）
         上面两种方法都属于破解，HTML5为解决这个问题，引入一个全新的API：跨文档通信API（Cross-document
messaging）
 这个API为window对象新增了一个window.postMessage方法，允许跨窗口通信，不论这两个窗口是否同源。postMessage()方法接收两个参数：一条消息和一个表示消息接收方来自哪个域的字符串，第二个参数对保障安全通信非常重要，可以防止浏览器把消息发送到不安全的地方。 举例来说，父窗口http://aaa.com向子窗口http://bbb.com发送消息，调用postMessage方法即可。 
 
var popup =window.open('http://aaa.com','title');
 
popup.postMessage('Hello World!','http://aaa.com');
 
 postMessage方法的第一个参数是具体的信息内容，第二个参数是接受消息的窗口的源(origin)，即“协议+域名+端口”。也可以设为“*”，表示不限制域名，向所有窗口发送。
 子窗口向父窗口发型消息的写法类似。 
window.opener.postMessage('Nice to see you','http://bbb.com'); 
接收到XDM的消息时，会触发window对象的message事件，这个事件以异步形式触发，所以可能会发生一些延迟。 
触发message事件后，传递给onmessage处理程序的事件对象event包含以下三方面的重要信息：

(1).event.source:发送消息的窗口
(2).event.origin:消息发向的网站
(3).event.data:消息内容

父窗口和子窗口可以通过message事件，监听对方的消息。 
window.addEventListener('message',function(e){
 
console.log(e.data);
},false);
 

下面的例子是，子窗口通过event.source属性应用父窗口，然后发送消息。 
window.addEventListener('message',receiveMessage);
function receiveMessage(event){
   
event.soure.postMessage('Nice to see you!','*');
}
event.origin属性可以过滤不是发给本窗口的消息。
window.addEventListener('message',receiveMessage);
function receiveMessage(event){
 
if(event.orgin !== 'http://bbb.com') return;
 
if(event.data === 'Hello World'){
 
  event.soure.postMessage('Hello',even
b374
t.source); 
}else{
   
console.log(event.data);
 }

}
 

     片段识别符指的是，URL的#号后面的部分，比如http://qq.com/x.html#fragment的#fragment。如果只是改变片段标识符，页面将不会重新刷新、
  父窗口可以把信息，写入子窗口的片段标识符。
  var src = originURL+'#'+data;
  document.getElementById('iframe').src = src;
  子窗口通过监听hashchange事件得到通知
  window.onhashchange = checkMessage;
  function checkMessage(){
  var message = window.location.hash;
  //...
 }
 同样的，子窗口也可以改变父窗口的片段标识符。
 parent.location.href = target+"#"+hash;