Html5 postMessage solves cross-origin and cross-window message transmission

Messages are transmitted during web development. In addition to client-to-server value transfer, there are also several common problems 1. data transmission between the page and its new window 2. message transmission between multiple Windows 3. page and nested iframe message transmission 4. there are some solutions to the above three problems: Cross-Origin data transmission postMessage (), but the message API introduced by html5 can solve these problems more conveniently, effectively and securely. The postMessage () method allows scripts from different sources to communicate with each other in an asynchronous manner, and supports cross-text file, multi-window, and cross-origin message transmission. 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 "/". http://test.com/index.html <Div style = "width: 200px; float: left; margin-right: 200px; border: solid 1px #333; "> <div id =" color "> Frame Color </div> <iframe id =" child "src =" http://lsLib.com/lsLib.html "> </Iframe> </div> http://test.com/index.html Use the postMessage () method to send cross-domain iframe pages http://lsLib.com/lsLib.html Pass the message window. onload = function () {window. frames [0]. postMessage ('getcolor ',' http://lslib.com ');} The page above test.com sends a message to lslib.com, so how can I receive the message on the lslib.com page and listen to the message event of the 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); in this way, we can receive messages transmitted in any window. For security reasons, we use the MessageEvent object at this time to determine the message source. MessageEvent is such a thing.