Cross-Window Messaging

Tagged:  

Over at John Resig's blog, he has posted an interesting article about cross-window messaging. The method is part of the HTML 5 Specifications and is available with Firefox 3.

The new method allows you to access all windows, including iFrames, Frames, Popups and the Current Window. The new call would create a DOM event, in the other window, which allows for messaging between the two windows.

Below is an excerpt from the post.

Obviously communicating in a cross-domain fashion is prone to abuse so there's additional information passed along that can be used to verify the integrity of the message. The full list of properties include:

* .data - A string holding the message passed from the other window.
* .domain - The domain name of the window that sent the message.
* .uri - The full URI for the window that sent the message.
* .source - A reference to the window object of the window that sent the message.

The last property is especially important as it allows for two-way communication to occur between these windows.

Simple Demo>

I've constructed a simple demo that you can try (requires a nightly of Firefox 3) in which you can send a message - through an iframe - to another domain, having the results be received and rendered by it. Thus, this demos consists of two pages: One acting as the sender (on ejohn.org), one acting as the receiver (on dev.jquery.com).

This first page is the sender - it's calling postMessage (sending the textual message) and also holds the iframe within which the receiving window is held.

<iframe src="http://dev.jquery.com/~john/message/" id="iframe"></iframe>
<form id="form">
  <input type="text" id="msg" value="Message to send"/>
  <input type="submit"/>
</form>
<script>
window.onload = function(){
        var win = document.getElementById("iframe").contentWindow;
        document.getElementById("form").onsubmit = function(e){
                win.postMessage( document.getElementById("msg").value );
                e.preventDefault();
        };
};
</script>

The follow page is the receiver - it has an event listener bound which watches for messages being passed to it and injects them in to the DOM.

<b>This iframe is located on dev.jquery.com</b>
<div id="test">Send me a message!</div>
<script>
document.addEventListener("message", function(e){
        document.getElementById("test").textContent =
                e.domain + " said: " + e.data;
}, false);
</script>

You can read the full post here.

This new method could make for some interesting applications. I could see your del.icio.us account sending messages back and forth from your Digg account in two different windows all on the client side. That is of course if the cross domain settings can be worked out.

[...] Cross-Window Messaging By David Hurth I've constructed a simple demo that you can try (requires a nightly of Firefox 3) in which you can send a message - through an iframe - to another domain, having the results be received and rendered by it. Thus, this demos consists of … - http://www.ajaxonomy.com [...]

Post new comment

The content of this field is kept private and will not be shown publicly.
  • Allowed HTML tags: <a> <em> <strong> <cite> <code> <ul> <ol> <li> <dl> <dt> <dd> <pre> <div> <blockquote> <object> <embed> <img> <param>
  • Lines and paragraphs break automatically.
  • Web page addresses and e-mail addresses turn into links automatically.

More information about formatting options

CAPTCHA
This question is for testing whether you are a human visitor and to prevent automated spam submissions.
Copy the characters (respecting upper/lower case) from the image.