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

跨文档消息传送，简称为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',event.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;