Using Postmesssage () to implement a method of information transfer between cross-domain iframe pages _javascript skills

Because of the limitations of the Web homology policy, when the page uses a Cross-domain iframe link, the master page and the subpage are not interactive, which caused a lot of trouble to the information transmission between pages, after a series of attempts, finally I found that the following methods can be implemented:

1. Sub-page URL argument

In short, all the parameters that need to be passed are added to the URL that is homologous to the main page, redirect the subpages to the URL, and then the main page gets those parameters through the SRC

The process is very complex and does not recommend this approach

2. PostMessage ()

Postmesssage () is an event-based message transfer API provided by HTML5 that enables cross text file, multiple windows, and Cross-domain message delivery.

PostMessage (Data,origin) method accepts two parameters

1.data: The data to be passed, mentioned in the HTML5 specification can be any basic type of JavaScript or a replicable object, but not all browsers do this, and some browsers can only handle string parameters. So we need to use the Json.stringify () method to serialize the object parameter when passing the parameter, and the reference json2.js in the low version IE can achieve similar effect.

2.origin: String parameter, indicating the source of the target window, protocol + host + port number [+url],url will be ignored, so you can not write, this parameter is for security reasons, PostMessage () method will only pass message to the specified window. Of course, if you like, you can also set the parameter to "*", which can be passed to any window, if you want to specify the same as the current window is set to "/".

Send Message (subpage)

function SendMessage (param) {
  var url;
  if (param.url) {
    url = param.url;
  };
  var Datajson = json.stringify ({
type:1,
    a:param.c,
    b:param.c,
    c:param.c,
    url:url
  }); C12/>window.parent.postmessage (Datajson, ' * ');

Since some browsers can only handle string parameters, we need to convert the argument to a string using json.stringfy () and then receive the page to convert back to the object using Json.parse ().

Receive Message

For the parameters passed by the subpage, we can get the message event of the window by listening to:

Window.addeventlistener (' message ', function (e) {
var data = Json.parse (E.data);
Switch (data.type) {
Case 1:
alert (DATA.A);
}
}, False);

The message event has several important attributes

1.data: As the name suggests, is the message sent
2.source: Window object to send Message
3.origin: Source (protocol + host + port number) for sending message window
Through the Postmesssage () method and the message event can be implemented across the domain delivery of messages, it should be noted that in the demo we are through the child page to the parent page of the message, so use the Window.parent Send, window receive:

Window.parent.postMessage (Datajson, ' * '), if it is from the home page for the subpage need to swap, use window to send, Window.frames[0] to receive.

The above use of postmesssage () to achieve cross-domain IFrame page Information transfer method is small series to share all the content, hope to give you a reference, but also hope that we support the cloud habitat community.