How to solve the problem of Cross-domain and Cross-window message delivery by postMessage in html5

This article mainly introduces how postMessage in html5 solves cross-domain and cross-window message delivery, which has certain reference value. Interested friends can refer to it. I hope you will gain a lot after reading this article. Let Xiaobian take you to understand it together.

When doing web development, there are several problems that are often encountered in messaging, in addition to the client and server passing values.

1. Data transfer of pages and new windows opened by them

2. Message passing between multiple windows

3. Pages with nested iframe messaging

4. Cross-domain data transfer for the above three problems

postMessage()

There are solutions to these problems, but HTML5 introduces a message API that makes it easier, more efficient, and safer to solve these problems. The postMessage() method allows scripts from different sources to communicate asynchronously in a limited way, enabling cross-text, multi-window, and cross-domain messaging.

The postMessage(data,origin) method takes two arguments

1.data The html5 specification mentions that the parameter can be any basic JavaScript type or replicable object, but not all browsers do this, some browsers can only handle string parameters, so we need to use JSON.stringify() method to serialize the object parameter when passing the parameter, and json2.js can achieve a similar effect in lower versions of IE.

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 the message to the specified window, of course, if you want to set the parameter to "*", so you can pass to any window, if you want to specify the same source as the current window, set it to "/".

http://test.com/index.html

Frame Color

We can send messages to the cross-domain iframe page http://lsLib.com/lsLib.html via the postMessage() method at http://test.com/index.html

_window.onload=function(){ window.frames[0].postMessage('getcolor','http://lslib.com'); }

receive messages

The page above test.com sends a message to lslib.com. How to receive messages on the lslib.com page? Just listen to the message event of window.

http://lslib.com/lslib.html

window.addEventListener('message',function(e){ if(e.source!= window.parent) return; var color=container.style.backgroundColor; window.parent.postMessage(color,'*'); },false);

This way we can receive messages from any window. To be safe, we use the MessageEvent object at this time to determine the message source. MessageEvent is such a thing.

There are several important attributes

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

Source: Window object to send message

origin: Source of the message window (protocol + host + port number)

This way we can receive messages across domains, and we can send messages back in a similar way.

Simple demo.

In this example, the div on the left will change depending on the color of the div inside the iframe on the right

Post Message Frame Color _window.onload=function(){ window.frames[0].postMessage('getcolor','http://lslib.com'); } window.addEventListener('message',function(e){ var color=e.data; document.getElementById('color').style.backgroundColor=color; },false); http://test.com/index.html html,body{ height:100%; margin:0px; }