How to Use postMesssage () to transfer information between cross-origin iframe pages _ javascript skills

The following section provides an information transfer method for cross-domain iframe pages using postMesssage. I think it is quite good. Now I will share it with you and give you a reference. Let's take a look at the limitations of the same-origin web policy. When cross-origin iframe links are used on pages, the home page and subpages cannot interact, this caused a lot of trouble for information transmission between pages. After a series of attempts, I found that the following methods can be implemented:

1. parameter passing through the subpage url

Simply put, add all parameters to the url with the same source as the home page, redirect the child page to the url, and then obtain these parameters through the src of iframe on the home page.

The process is very complex. We do not recommend this method.

2. postMessage ()

PostMesssage () is an event-based message transmission API provided by html5. it can deliver messages across text files, windows, and cross-origin.

The postMessage (data, origin) method accepts two parameters.

1. data: The data to be transmitted. The html5 specification mentions that this parameter can be any basic type or replicated object of JavaScript. However, not all browsers have done this, some browsers can only process string parameters, so we need to use JSON when passing parameters. the stringify () method serializes object parameters. Similar effects can be achieved by referencing json2.js in earlier versions of IE.

2. origin: string parameter, indicating the source of the target window. Protocol + host + port number [+ URL], the URL will be ignored, so you can leave it empty. this parameter is for security consideration, postMessage () the method will only pass the message to the specified window. If you want to, you can also set the parameter to "*", so that the message can be passed to any window, if you want to specify the same source as the current window, set it "/".

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  });  window.parent.postMessage(dataJson, '*');}

Because some browsers can only process string parameters, we need to useJSON. stringfy ()Convert the parameter to a string, and then use JSON. parse () to convert it back to the object on the receiving page.

Receive messages

For the parameters passed on the sub-page, we can obtain them by listening to the message event of the window:

Window. addEventListener ('message', function (e ){
Var data = JSON. parse (e. data );
Switch (data. type ){
Case 1:
Alert (data. a); break;
}
}, False );

Message events have several important attributes.

1. data: as the name suggests, it is the message passed.
2. source: The Window object for sending messages
3. origin: Source of the message sending window (Protocol + host + port number)
You can use the postMesssage () method and message event to transmit messages across domains. Note that in the demo, we transmit messages to the parent page through sub-pages, therefore, window is used. parent sending, window receiving:

Window. parent. postMessage (dataJson, '*'); if it is from the home page facing the subpage, you need to switch, use window to send, window. frames [0] to receive.

The above post-Use of postMesssage () to implement cross-origin iframe information transmission between pages is all the content shared by Alibaba Cloud xiaobian. I hope you can give us a reference and support for me.