HTML and CSS Reference
In-Depth Information
4.3. Messaging on the client side
Client-side messaging refers to the communication between windows and scripts that are
loaded in the browser. These could be browser windows, iframes, framesets, or worker
threads; the HTML5 specification refers to these with the umbrella term
script contexts
.
Before HTML5, communication between different script contexts has been done by direct
DOM manipulation. If you want to build web pages out of loosely coupled components,
this isn't a good approach for two reasons:
• Changes to the structure of one component could easily break all the components
that try to communicate with it.
• Each component needs access to the full DOM of the hosting page and vice versa.
You can't share only a limited set of information. Often it's easier to communicate
via the server. In the new world of disconnected web applications, that's sometimes
no longer an option.
Cross-document versus cross-domain
You'll often hear cross-document messaging referred to as cross-domain messaging. It's
not a requirement to have the two documents served from different domains. Messaging
will work just as well if the two pages are on the same domain. But that option doesn't rep-
resent new functionality in HTML, rather a different way of doing something we've been
doing for years. As a result, people tend to focus on the cross-domain aspect.
In this section you'll have a brief introduction to HTML5's cross-document messaging
API, and then you'll look at how to use it to connect the applications from
sections 4.1
and
4.3.1. Communicating across domains with postMessage
Web browsers usually restrict communication between windows according to the Same
Origin Policy: Scripts on pages loaded from one domain can't access content in windows
loaded from another domain. This is a sound security approach. Without it, a website could
create an iframe, load your Facebook page into it, and steal your personal details or post
