jQuery.messaging is a simple jquery plugin for sending json objects (or strings) between domains using HTML5.

• Simple setup (5 steps)
• Send and receive messages across domains
• Restrict incoming data based on the incoming connection’s domain

Requirements

• JQuery
• JQuery.messaging code

We start with the document ready function call where we prepare values for the plugin. Keep in mind that we are working with two different pages on two different domains. The first 3 steps explain setting up the page that receives messages.

1 $(document).ready(function(){
2   $("#receive").messaging('init',
3     { 'state' : 'receive_and_reply', 'strict' : false, 'received' : received });
4 });

Create a function for processing messages. Note that the reply method is a function pointer parameter being passed into the received method. In other words, it is internal to the jquery plugin and you don’t have to worry about its implementation.

1 function received(event, data, reply) {
2   var message = document.domain + " received " + data;
3   reply(message);
4 }

Ok we are done with the page that receives message! Next we move on to the page that sends messages.

1 $(document).ready(function() {
2     $("#test_iframe").messaging('init',
3       { 'state' : 'send_and_receive', 
4         'domain' : 'http://demo.japanified.com', 
5         'receiv  ed' : received }
6     );
7   });

Create a method for sending messages.

1 function send_message() {
2   $("#test_iframe").messaging('send', $("#message").val());
3 }

Create the iframe that holds the recipient domain’s page.

1 <iframe id="test_iframe" src="http://demo.japanified.com/receiver.html"></iframe>

You are done!

You can be a bit more restrict about whether or not a page is willing to send AND receive messages. Also you can restrict the receiver to only a specified domain if you want heightened security. Please read the comments in the plugin for further details.

Technical details of the HTML5 specification.