Shulou(Shulou.com)06/01 Report--

This article introduces the knowledge of "how to use Communication API in HTML5". In the operation of actual cases, many people will encounter such a dilemma, so let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

1. Cross-document message communication

Cross-document message communication ensures secure cross-source communication among iframe, tabs, and windows. It defines postMessage API as a standard way to send messages. Sending messages using postMessage is very simple, and the code is as follows:

ChatFrame.contextWindow.postMessage ('Hello,world',' http://www.example.com');

When receiving a message, you only need to add an event handler to the page. When a message arrives, it is decided whether to process the message by checking the source of the message.

A message event is a DOM event with data (data) and origin (source) properties. The data attribute is the actual message delivered by the sender, while the origin attribute is the sending source.

PostMessage API is not only competent for communication between documents of the same origin, but postMessage API is also useful when browsers do not allow non-homologous communication. Because of its consistency and ease of use, postMessage is also recommended when communicating between documents of the same origin. PostMessage API should always be used in communication in a JavaScript environment, such as when using HTML5 Web Worker to communicate.

1.1 understanding source security

The concept of HTML5 Glory introduction Source (origin) clarifies and improves domain security. A source is a subset of the addresses used to establish a trust relationship on the network. The source consists of rules (scheme), host (host), and port (post).

Paths are not considered in the concept of source.

HTML5 defines the serialization of the source. The source appears as a string in API and protocols.

PostMessage's security rules ensure that messages are not delivered to unexpected source pages. When sending a message, the sender determines the source of the receiver. If the window that the sender uses to call postMessage does not have a specific source (for example, the user jumps to another site), the browser does not deliver the message.

Similarly, when receiving a message, the source of the sender is also used as part of the message. To avoid forgery, the message source is provided by the browser. The receiver can decide which messages to process and which messages to ignore. We can keep a whitelist and tell the browser to process only messages from trusted sources.

It is best never to evaluate strings from third parties. Furthermore, avoid using the eval method to deal with application internal strings. You can use JSON through window.JSON or json,.org parsers.

1.2 browser support for cross-document message communication

A common practice is to detect the existence of the withCredentials attribute in the XMLHttpRequest object:

JavaScript Code copies content to the clipboard

Var xhr = new XMLHttpRequest (); if (typeof xhr.withCredentials = undefined) {/ / Cross-source XMLHttpRequest} else {/ / Cross-source XMLHttpRequest} is not supported

1.3Use postMessage API

Note that the MessageEvent interface defined by HTML5 is also part of HTML5 WebSockets and HTML5 WebWorkers. The API interface used by HTML5 to accept messages is consistent with the MessageEvent interface. Other communication classes API, such as EventSource API and Web Workers, also use the MessageEvent interface to pass messages.

1.4 create an application using postMessage API

Send a message

You can send a message by calling the postMessage () function in the window object of the target page, as follows:

JavaScript Code copies content to the clipboard

Window.postMessage ("Hello, world", "porta")

The first parameter includes the data to be sent, and the second parameter is the destination of the message. To send a message to iframe, you can call postMessage in the contentWindow of the corresponding iframe, as follows:

JavaScript Code copies content to the clipboard

Document.getElementsByTagName ("iframe") [0] .contentWindow.postMessage ("Hello, world", "cha")

Listen for message events

When receiving a message, you only need to add an event handler to the page. When a message arrives, it is decided whether to process the message by checking the source of the message.

JavaScript Code copies content to the clipboard

Window.postMessage ("Hello, world", "porta")

A message event is a DOM event with data (data) and origin (source) properties. The data attribute is the actual message delivered by the sender, while the origin attribute is the sending source.

The source consists of rules (scheme), host (host), and port (port).

For example, because the rules are different (such as https and http), the page is different from the source of the page.

Paths are not considered in the concept of source. Unlike just the path, they are the same source.

The source appears as a string in API and protocols.

JavaScript Code copies content to the clipboard

Var originWhiteList = ["porta", "game", ""]; function checkWhiteList (origin) {for (var item0; I)

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.