HTML and CSS Reference
In-Depth Information
Step 4: Add JavaScript to the first page
Now you need to add code to initiate the messaging.
Channel messaging works by creating a pair of ports. A port is a generic object that allows
messaging. It supports the
postMessage
method and
onmessage
event that you're fa-
miliar with from cross-document messaging. Anything sent to one port will appear as out-
put from the other port; in HTML5 terms they're described as
entangled
. This is by ana-
logy to
quantum entanglement
: two particles that, no matter what distance separates them,
change simultaneously. One of the ports is then sent to another script context. This could be
a script in another document or window or a web worker.
ListingF.2
shows the details. The
(you could add it in the
head
element, but then you'd need to wrap it in a function and
execute it on the
load
event). As you can see, the channel-messaging API is similar to the
cross-document messaging API you looked at in
chapter 4
.
Listing F.2. Channel messaging/example-1.html JavaScript