javascript

Chapter 21: Upcoming API s
(continued)
div.dataset.appId = 23456;
div.dataset.set(“myname”, “Michael”);
//is there a “myname” value?
if (div.dataset.has(“myname”)){
alert(“Hello, “ + div.dataset.myname);
}
Because the names of the methods for DOMStringMap have not yet been determined, this code is an
example usage of the anticipated clarifications.
Custom data attributes are useful when nonvisual data needs to be tied to an element for some other
form of processing. This is a common technique to use for link tracking and mashups in order to better
identify parts of a page.
Cross - Document Messaging
One of the challenging areas of web development is how to allow documents from different domains to
communicate with one another. The cross - domain security policy instituted by browsers is considered
necessary to prevent malicious sites from interacting with others. This same restriction, however, has
made it difficult to produce mashups that have data coming from a number of sources. It ’ s quite
common to use < iframe > elements to embed information from another domain, but at this time, the
containing page and the < iframe > content can ’ t communicate in any way.
The HTML 5 cross - document messaging system is designed specifically to enable this communication in
a safe way. Instead of allowing direct access to another document ’ s DOM and associated information,
documents are permitted to send and receive messages containing data.
Cross - document messaging is executed using the postMessage() method on any window object
(including those representing iframes). Unlike other properties and methods of a window object,
postMessage() is always accessible by all other documents, even those from a different domain. This
method accepts two arguments: data to be sent to the document and the target domain for the data. The
second argument is a security feature, ensuring that the data is sent only to documents from appropriate
domains. If the messages should go to any domain, the second argument can be set to an asterisk.
When postMessage() is called on a window object, and the target domain is the same as the window ’ s
domain, the message event fires on the document . The event object created for a message event has the
following properties:
❑
❑
❑
data — The data that was passed in as the first argument to postMessage()
origin — The protocol, domain, and port number of the window that sent the message
source — The window object that sent the message
This information allows the receiver to determine if the message is from a valid source.
676