标签：
跨文档消息传送，简称为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;
标签：
原文地址：http://www.cnblogs.com/mingxiastory/p/5470350.html
