The cross-origin threshold of HTML5 communication API is no longer high, and data push is no longer a dream _ html5 tutorial skill-

Two new communication-related APIs are added in HTML5: Cross-document message transmission and WEBSocketsAPI. The cross-document message transmission function allows message transmission on different webpage documents and ports (cross-origin. The websocketsapi allows the client and server to transmit data through the socket port, so that the data push technology can be used. Preface

Two APIs related to communication are added to HTML5: Cross-document message transmission and WEB Sockets APIs,

The cross-document message transmission function allows you to transmit messages on different webpage documents and ports (in cross-domain situations.

The web sockets api allows the client and server to transmit data through the socket port, so that data push technology can be used.

Cross-document message transmission

Previously, it would take a lot of effort to obtain cross-origin information. Now, you only need to retrieve the window object instance where the webpage is located and change it to implement mutual communication.

First, you need to listen on the window objects of messages sent from other windows:

window.addevntListener('message', function () {}, false)

Use the postMessage method of a windows Object to send messages to other windows:

OtherWindow. postMessage (message, targetOrigin) the first parameter is to send text, or it can be the js object (json). The second parameter is the URL of the receiving message Object window. Wildcards can be used.

Simple Example:

The Code is as follows:

Post information