Cross-document messaging in Opera

Please note that this example is deprecated, as the specification has changed numerous times since this was written back in 2005

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.

h3. 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:
bc. function sendMessage(val){
var receiver = document.getElementsByTagName(“iframe”)[0].contentDocument;
h3. … 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:
bc. 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 +=”\n\n”;
parent = ev.source;
var d = new Date();
ev.source.postMessage(“The document at “+location.href+” received your message at “+d);
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.

Leave a comment


  1. An interesting feature and more robust than iframe javascript manipulation. I wonder if this gets into wide use after the hype of xmlhttprequest and what applications could make use of this.

  2. Jeroen Hoekx

     /  2005-12-02

    Cool! It also works in opera 8! Is it mentioned in one of the changelogs?
    When I download the file to my computer and open it, O9tp1 gives a security error:
    JavaScript – file://localhost/C:/Documents%20and%20Settings/Jeroen/Bureaublad/sender.html
    Event thread: click
    name: ReferenceError
    message: Security error: attempted to read protected variable
    Opera 8 has no problems loading that file. Should I file a bug report or is it already fixed?

  3. Jeroen: This seems to be fixed.

  4. Pretty neat!
    Although it seems like its trying to mimic distributed computing on a wrong platform… then again perhaps it is not too bad to introduce something like this – we’ll see how (if) it takes off.
    I definitely like the possibility.

  5. I apologize for being a bit off topic, but does Opera have any plans to develop an add-in for Windows Desktop Search / MSN Search Toolbar?

  6. I really cannot comment on what we are planning or not planning to do for the future. Sorry.

  7. I was one of those that did not know this feature Opera offers but thanks for pointing it out posting it.

  8. Source panel(sort of)

    Using a bit of Cross document messaging its possible to comminucate between different documents, using the power of UserJS I made a sort of source pan …