Use postMessage() to transfer information between iframe cross-domain pages_javascript skills

Due to the restrictions of the web origin policy, when the page uses a cross-domain iframe link, the main page and the sub-page cannot interact, which causes a lot of trouble in the transfer of information between pages. After a series of attempts, Finally I found the following method to achieve it:

1. Pass parameter of sub-page url

To put it simply, add all the parameters that need to be passed to the url that has the same origin as the main page, redirect the sub-page to the url, and then the main page obtains these parameters through the src of the iframe

The process is very complicated and this method is not recommended

2. postMessage()

postMessage() is an event-based message transmission API provided by HTML5, which can realize cross-text document, multi-window, and cross-domain messaging.

postMessage(data,origin) method accepts two parameters

1.data: The data to be passed. The html5 specification mentions that this parameter can be any basic type of JavaScript or a copyable object. However, not all browsers can do this. Some browsers can only Processing string parameters, so we need to use the JSON.stringify() method to serialize object parameters when passing parameters. Similar effects can be achieved by referencing json2.js in lower 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 it does not need to be written. This parameter is for security reasons. The postMessage() method only The message will be passed 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 origin as the current window, set it 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
});
window.parent.postMessage(dataJson, '*');
}

Since some browsers can only handle string parameters, we need to use JSON.stringfy() to convert the parameters to strings, and then use JSON.parse() to convert the parameters back to objects when receiving the page.

Receive message

For the parameters passed by 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); 

The message event has several important attributes

1.data: As the name suggests, it is the message passed in

2.source: the window object that sends the message

3.origin: The source of the message window (protocol + host + port number)

Cross-domain message delivery can be achieved through the postMessage() method and message event. It should be noted that in the demo, we deliver messages to the parent page through the child page, so we use window.parent to send and window to receive. :

window.parent.postMessage(dataJson, '*');

If it is from the homepage to the subpage, it needs to be swapped. Use window to send and window.frames[0] to receive.

The above content is the editor’s introduction to using postMessage() to realize information transfer between iframe cross-domain pages. I hope it will be helpful to everyone!