• What's the problem?
• What's Cross-Document Messaging?
• Understanding the Origin concept
• Before HTML5 ?

• http://www.google.com
• http://www.google.com/hello/world

• http://www.google.com
  
• http://static.google.com
• http://www.google.com:8000
• https://www.google.com
• http://baidu.com

• window.name
• document.domain
• JSONP
• proxy

• Message Events
• postMessage

• data
• origin
• the originating document's scheme, host and port
• for example: 'https://www.google.com:8080'
• source
• reference to the originating document's window
• a WindowProxy object
• ports
• an array of MessagePort objects sent with the message
• lastEventId
• only available on server-sent events

• message
• targetOrigin
• [transfer]

var myIframe = document.getElementById('myFrame');myIframe.contentWindow.postMessage('hello', '*');

window.addEventListener('message', receiveMessage, false);function receiveMessage(event){    if(event.origin !== 'http://www.google.com:8080') return;    event.source.postMessage(        {ret:0, message:'nice talking to you'},         event.origin    );}

• What's the problem?
• Channel Messaging

• MessageChannel
• MessagePort
• Sending ports and messages

var channel = new MessageChannel();

• port1
• port2

var channel = new MessageChannel();var port2 = channel.port2;

• postMessage(message[, transfer])
• start()
• close()