Start learning with our library of video tutorials taught by experts. Get started
Viewers: in countries Watching now:
This course shows how to communicate between web pages, both within a single domain and across one or more domains, using the HTML5 Messaging API. Author Bill Weinman reviews security and the same origin policy, details cross-origin scripting techniques, and explores examples of cross-document messaging. The course describes how to register and send messages to listeners and handle errors.
HTML5 messaging allows you to create communication channels between objects and windows. It's used by many of the other HTML5 APIs, and may even be used to communicate between windows across domains. HTML5 messaging is accomplished by sending and receiving events. An event object has a data member which carries the message payload. The data member may be a string or it may be an object. Alternately, the data member may carry a JSON payload in order to represent more complex structured data.
Note that Internet Explorer will only send strings, so you'll need to use JSON for any structured data. Listeners may be implemented in one of two ways. IDL listeners use the familiar onmessage = function syntax, and registered listeners use the addEventListener method. Keep in mind that depending on the objects you're working with, one of these methods may be supported better than the other, or even at the exclusion of the other. Senders are implemented with a simple postMessage method. It's very simple, and we'll discuss the details as we use it later on in this course.
The event object itself has several members that you'll be interested in. The data member carries the message payload. The origin member carries a string representing the origin of the message--and we'll get into detail with this later-- and the source member carries a proxy window object. HTML messaging is supported on all the major platforms, with few differences. Please note that while cross-domain messaging works on Microsoft Internet Explorer, it only works for frames; it does not work between documents in separate tabs or windows.
Also note again that Internet Explorer will only send strings in the payload, so you'll need to use JSON for any structured data. HTML5 is simple to implement, but it does have some dangers to look out for, we'll cover these details in the rest of the course.
There are currently no FAQs about HTML5: Messaging and Communications in Depth.
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.