HTML and CSS Reference
In-Depth Information
In the following code, the
receiver()
function has been modified to
check the origin of the
onmessage
event:
function receiver(e) {
if (e.origin == 'http://www.boogdesign.com') {
document.getElementById('message').value = e.data;
} else {
alert('Unauthorized');
}
}
Similarly, the
update
functions should be modified to send the origin:
function update_parent() {
parent.postMessage('Updated from child', 'http://
www.boogdesign.com');
}
Note that the origin argument here should be the parent's origin, not
the child's.
Communicating between documents across domains is just one of the
new communication features in
HTML5
. It also offers new options for
communicating with the server. The next section will look at the most
exciting of these technologies: WebSockets.
Real-time communication with the WebSocket API
WebSockets are a lightweight protocol, new to
HTML5
, allowing a
server to communicate directly with a web browser without waiting for
a request. You may be thinking that the web has always had a way for
the browser and server to communicate, and that it's a fairly fundamen-
tal property, but it's always had a request-response model. This means
that to receive a response from the server, the browser must first make
a request. Although this is fine for web pages, it has limitations as far as
web-based applications are concerned. If an application relies on fre-
quent updates from the server—for instance, if it's a multiplayer game
or a chat application—the browser could end up not requesting an
update as it becomes available, or wasting bandwidth requesting
updates when none are available.
