Arve Bersvendsen

Cross-document messaging in Opera

Unknown to most people, but Opera implements a little-known feature of HTML5: Cross-document messaging. With this feature implemented, authors can pass messages between documents residing on different domains.

I have written a simple example of using cross-document messaging. Load the testcase into your browser, type something in the input field in the main document, and submit. The message will then appear in the lower frame’s textarea. This will work even if you save the document to another server, or even your local disk. Continue reading for the explanation.

Setting up the sender side.

The very first thing you need to be able to send a cross-document message is a valid handle to a document, contentDocument if you please. This can usually be obtained by addressing a loaded frame, iframe, object or popup. When this handle has been obtained, the method postMessage is invoked to actually send the message. In the example, this is all done in a function that’s called when the form is submitted:

function sendMessage(val){
  var receiver = document.getElementsByTagName("iframe")[0].contentDocument;
  receiver.postMessage(val);
}

… and the receiver

The document that the message is sent to, will then need to have a proper listener set up for the cross-document message. This is done by setting up an event listener for the message event. Again, from the example:

document.addEventListener('message',function(ev){
  var output = document.getElementsByTagName("textarea")[0];
  output.value += "Message from domain "+ev.domain+" and URI "+ev.uri+":\n";
  output.value += ev.data+"\n\n";
  parent = ev.source;
  var d = new Date();
  ev.source.postMessage("The document at "+location.href+" received your message at "+d);
  setTimeout(delayedResponse,2500,ev.source);
},false);

The event object passed as an argument to the event has some interesting properties.

• data: This is a string with the actual data of the message previously posted with postMessage.
• source: This provides a reference to the calling window, which can be used for sending messages to the originating document.
• domain: The originating domain for the document that sent the message.
• uri: The exact URI of the document that sent the message.

Note that for security reasons, you should always check the origin of the message you are receiving, by checking either the domain or uri property, even if this example has ignored such checking for educational purposes.

Have fun with cross-document messaging.