Usually when doing web development, there are several problems that are often encountered in addition to clients and server transmission.
1. Data transmission of pages and new windows opened
2. Messages between multiple windows
3. Page and nested iframe message transmission
4. Cross -domain data transmission of the above three issues
postmessage ()These problems have some solutions, but the MESSAGE API introduced by HTML5 can be more convenient, effective, and securely solved. PostMessage () method allows scripts from different sources to use asynchronous methods for limited communication, which can realize cross -text files, multi -window, and cross -domain messages.
PostMessage (data, Origin) method accepts two parameters
1. Data: The data to be passed, the HTML5 specification mentioned that the parameter can be any basic type or replicable object of JavaScript, but not all browsers have done this. Some browsers can only process the string of the string Parameters, so we need to use the json.stringify () method to serialize the object parameter when passing the parameters. Reference json2.js in the low version IE can achieve similar effects. 2.origin: String parameters, indicate the source of the target window, protocol+host+port number [+url], URL will be ignored, so you can write it. This parameter is for security considerations. The postmessage () method will only make Message Pass to the specified window. Of course, if you are willing, you can also build a parameter settings to*, so that you can pass it to any window. If you want to specify and the current window homology, set it to/.http://test.com/index.html
<div style=width:200px; float:left; margin-right:200px;border:solid 1px #333;> <div id=color>Frame Color</div> </div> <div> <iframe id=child src = http://lslib.com/lslib.html> </iframe> </div>
We can pass the message to the cross -domain iFrame page http://lslib.html on the cross -domain if http://test.com/index.html transmits messages
Window.Onload = Function () {Window.frames [0] .postmessage ('Getcolor', 'http://lslib.com');} Receiving messageThe page above test.com sent a message to lslib.com, so how to receive messages on the lslib.com page, and monitor the MESSAGE event of Window's MESSAGE event.
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 the message passed by any window. For the sake of safety, we use the MESSAGEEVENT object at this time to determine the source.
There are several important attributes
1. Data: As the name suggests, it is the message that is passed on 2.Source: Window object to send messages 3.origin: Source of sending a message window (protocol+host+port number)In this way, you can receive cross -domain messages. We can also send messages back. The method is similar
Simple demoIn this example, the DIV on the left will change according to the color change of the div in the right on the right
<! Doctype html> <html> <head> <Title> Post Message </Title> </Head> <body> <div style = width: 200px; foot: left; 200px; Border: Solid 1px # # 333;> <div ID = color> frame color </div> </div> <div> <iframe id = child src = http://lslib.com/lslib.html> </div> </div> < Script Type = Text/Javascript> Window.onload = Function () {Window.frames [0] .postmessage ('Getcolor', 'http://lslib.com');} Window.addd EventListener ('Message', Function ( e) {var color = e.data; document.GetelementByid ('color'). STYLE.BACKGROUNDCOLOR = color;}, false); / / index.html <! Doctype html> <html> <wead> <Steyle Type = Text/CSS> HTML, Body {Height: 100%; Margin: 0px;} </head> <body style = height: 100%; > <div ID = Container Onclick = CHANGECOLOR (); Style = Widht: 100%; Height: 100%; Background-COLOR: RGB (204, 102, 0); pt Type = Text/Javascript> var container = document.GetelementByid ('Container'); Window.adDeventListener ('Message', Function (E) {if (E.Source! = Window.p.p Arent) Return; var color = Container.style.backgroundColor ; Window.parent.postmessage (color, '*');}, false); Function Changecolor () {var color = control.backgroundcolor; if (color == 'rgb (204, 204, 204, 102, 0) ')) color = 'rgb (204, 204, 0)';} Else {color = 'rgb (204,102,0)';} Container.style.backgroundColor = color; ');} </script> </body> </html> http://lslib.com/lslib.htmlWhen the page is loaded in the example, the homepage sends the 'Getcolor' request to iframe (the parameters are not practical)
Window.Onload = Function () {Window.frames [0] .postmessage ('Getcolor', 'http://lslib.com');}Iframe receives the message and send the current color to the main page
Window.adDeventListener ('Message', Function (E) {if (e.Source! = Window.parent) Return; VAR COLOR = CONTAINER.STYLE.BACKGROUNDCOLOR; Window.parent. PostMessage (color, '*');}, FALSE;Receive messages on the homepage, change your own div color
Window.adDeventListener ('Message', Function (E) {var color = e.data; document.GetelementByid ('color'). STYLE.BACKGROUNDCOLOR = color; );When clicking iframe trigger its color change method, send the latest color to the main page
function changeColor () { var color=container.style.backgroundColor; if(color=='rgb(204, 102, 0)'){ color='rgb(204, 204, 0)'; }else{ color=' RGB (204,102,0) ';} Container.style.backgroundColor = color; window.parent.postmessage (color,'*');}The homepage still uses the program that just listened to the MESSAGE event to handle its own discoloration
Window.adDeventListener ('Message', Function (E) {var color = e.data; document.GetelementByid ('color'). STYLE.BACKGROUNDCOLOR = color; ); at lastThe simple usage solves the big problem. It is said that Facebook is already using it, and this is also the method of transmitting messages by HTML5 another API-Web worker. So what is its browser compatibility? The so -called browser compatibility has almost become a problem that IE has started. Essence Essence However, the good news is like LocalStorage. IE8+supports it, but the low versions of some browsers (such as Firefox4.0) do not support Window.onMessage = Function () {} In order to compatible IE, the binding writing also determines whether to support AddeventListener.
The above is all the contents of this article. I hope it will be helpful to everyone's learning. I also hope that everyone will support VEVB Wulin.com.