HTML5 PostMessage and AddEventListener realize cross-domain communication __html

A prerequisite for using PostMessage to implement Cross-domain is a page that invokes another page through <iframe>, as shown in the following example:

In this example, the inner.html is invoked via outter.html

This is outter.html .

<! DOCTYPE html>
 

This shows inner.html


<! DOCTYPE html>
 
The example above, if you want to try it,


First, you need to create a new test folder under Tomcat WebApps, and put inner.html and outter.html under the Test folder.

Second, in the computer's Hosts file configuration two domain names 127.0.0.1 test.inner.com and 127.0.0.1 test.outter.com

Third, browser access to the URL is http://test.outter.com:8080/test/outter.html


The relevant knowledge points are as follows:

First, <iframe> must be </iframe>, but not the use of <iframe/>

Second, get the child window object: document.getElementById (""). contentwindow==$ ("") [0].contentwindow==window.frames[0]

Get parent Window object: window.parent

Three, postmessage two parameters, the first parameter is the value to pass across the domain, the second parameter is the scope, including protocol, domain name and port. This is either the corresponding domain name, or the *, which means it is valid for all domains.

The front of the PostMessage defines the window to which this window is being passed a value. This is where the parent window passes a value to the first child window.

The method AddEventListener (type,function,usecapture) can be preceded by elements, document, window, or XMLHttpRequest

Type string, event name, excluding "on", such as Click,mouseover,keydown.

Message//event, OnMessage event occurs every time an update is received.

When it is postmessage, it can be accepted with onmessage, but when it is sendmessage, it cannot be received with OnMessage.

Usecapture for use event capture, generally false//event capture, from top down, and event bubbling opposite

Vi. the difference between SendMessage and PostMessage

PostMessage: It is only responsible for putting messages into message queues, unsure when and whether to process, asynchronously, and return postMessage whether it is properly executed.

SendMessage: Put the message into Message Queuing, wait until the message is processed, return the message Processing return code (DWORD type) before continuing, synchronization, return processing results.