HTML5 and CSS3, Second Edition

This places the form and the <iframe> side by side and adds basic styles to

the form fields.

Receiving the Messages

The onmessage() event fires whenever the current window receives a message.

The message comes back as a property of the event. We’ll register this event

using jQuery’s on() method so it works the same in all browsers.

html5_cross_document/supportpage/javascripts/application.js

$(window).on("message",function(event){

$("#to").val(event.originalEvent.data);

});

jQuery’s on() method wraps the event and doesn’t expose every property. We

can get what we need by accessing it through the event’s originalEvent property

instead.

If you open the support site in Firefox, Chrome, Safari, or Internet Explorer

8 or higher, you’ll see that it works extremely well. There’s no need for a fall-

back solution. Be sure to run the web-server script in the example code and

visit http://localhost:3000 to see this in action if you get stuck.

The ability to make two separate pages or applications communicate like this

opens up a lot of possibilities for making more modular applications.

Limitations in Internet Explorer 8 and 9

While Internet Explorer 8 and 9 both support Cross-Document Messaging,

the postMessage() function can handle only strings. It can’t handle objects. In

addition, messaging works only between frames and iframes. The jQuery

PostMessage plug-in might be useful, as it does allow object serialization.^5

Now that we know how to send messages between websites, let’s look at how

we can do two-way communication with our users.

5. http://benalman.com/projects/jquery-postmessage-plugin/

Chapter 10. Creating Interactive Web Applications • 218

Download from Wow! eBook <www.wowebook.com> report erratum • discuss