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

This article describes how to use postMesssage () to transfer information between iframe cross-origin pages. For more information, see the restrictions on the same-origin web policy, when the cross-origin iframe link is used on a page, the home page and the sub-page cannot interact, which causes a lot of trouble for information transmission between pages. After a series of attempts, finally, 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 first use JSON. stringfy () to convert the parameter to a string, and then receive the page and convert it back to the object using JSON. parse.

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 you want to switch from the homepage to a subpage, use window to send the message, and window. frames [0] will receive the message.

The above content is a small Editor to introduce you to use postMesssage () to transfer information between iframe cross-origin pages. I hope it will help you!