HTML5 new mechanism: PostMessage for secure cross-domain communication (code)

This article brings the content is about HTML5 new mechanism: PostMessage to achieve security cross-domain communication (code), there is a certain reference value, the need for friends can refer to, I hope to help you.

PostMessage parsing

• HTML5 provides a new mechanism for secure cross-source communication postmessage. Grammar
  Otherwindow.postmessage (Message, Targetorigin, [transfer]);
  Otherwindow: A reference to other windows, such as the Contentwindow property of the IFRAME, execution,
  window.open returns the Window object. Message: The data that will be sent to the other window. Targetorigin:
  The Origin property of the window is used to specify which Windows can receive a message event, whose value can be either the character "*" (which means no limit) or a URL transfer:
  is a string of transferable objects that are passed along with the message. Ownership of these objects will be transferred to the recipient of the message, and sending a drop will no longer retain ownership.

• Element.addeventlistener (event,fn,usecaption); Three parameter event events such as
  Click MouseEnter MouseLeave callback function usecaption
  Used to describe whether it is bubbling or capturing. The default value is False, which is the bubbling pass. A value of true is the capture pass.

Implementation method

Main interface main.html

<! DOCTYPE html>
IFrame interface

<! DOCTYPE html>