Comments: To implement cross-document message transmission, you must first listen to the message event of the window object, and then use the postMessage () method of the window object to send messages to other windows. Next, we will give you a detailed introduction, if you are interested, refer to the following to listen to the message event of the window object.
The Code is as follows:
Window. addEventListener ("message", function (event ){
// Processing program code
}, False );
Use the postMessage () method of the window object to send messages to other windows. The definition of this method is as follows:
The Code is as follows:
Otherwindow. postMessage (message, targetOrigin );
This method uses two parameters: the first parameter is the message text sent, but it can also be any JavaScript Object (converted to text through JSON ); the second parameter is the URL address of the message receiving Object window. You can use the wildcard "*" in the URL string to specify all addresses. However, we recommend that you use an accurate URL address. Otherwindow is a reference to the window object to be sent. You can use window. the open () method returns this object, or the window. the frames array specifies the sequence number (index) or name to return the window object of a single frame.
Example
The Code is as follows:
<! DOCTYPE html>
<Html>
<Head>
<Meta charset = "UTF-8"/>
<Title> example of cross-document message transmission </title>
<Script type = "text/javascript" src = "http://code.jquery.com/jquery-1.6.4.min.js"> </script>
<Script type = "text/javascript">
$ (Function (){
// Listen for message events.
Window. addEventListener ("message", function (event ){
// Ignore messages sent from pages other than the specified URL.
If (event. origin! = "Http://www.blue-butterfly.net") return;
Alert (event. data); // displays the message.
}, False );
$ ("# IframeContent"). load (function (event ){
// Send a message to the subpage
This [0]. postMessage ("Hello", "http://www.blue-butterfly.net/test ");
});
});
</Script>
</Head>
<Body>
<Header>
<H1> Cross-origin Communication Example </Header>
<Iframe id = "iframeContent" width = "400" src = "http://www.blue-butterfly.net/test/"> </iframe>
</Body>
</Html>
The code in the subpage is as follows:
The Code is as follows:
<! DOCTYPE html>
<Html>
<Head>
<Meta charset = "UTF-8"/>
<Script type = "text/javascript" src = "http://code.jquery.com/jquery-1.6.4.min.js"> </script>
<Script type = "text/javascript">
$ (Function (){
Window. addEventListener ("message", function (event ){
If (event. origin! = "Http: // Lulingniu") return;
$ ("# Console"). append (event. origin). append ("Incoming message:"). append (event. data );
// Send a message to the home page.
Event. source. postMessage ("Hello, there is:" + this. location, event. origin );
}, False );
});
</Script>
</Head>
<Body>
<P> This is the content in iframe. </P>
<Div id = "console"> </div>
</Body>
</Html>
• You can listen to the message event of the window object to receive messages.
• Access the origin attribute of the message event to obtain the message sending source (in this example, the sending source on the home page is "http: // Lulingniu ", the sending source for the Child page is http://www.blue-butterfly.net "). Note: The sending source and website URL are not a concept. The sending source only includes the domain name and port number. In order not to receive messages maliciously sent from other sources, it is best to check the sending source.
• You can obtain the message content by accessing the data attribute of the message event (it can be any JavaScript Object, using JSON ).
• Use postMessage () to send messages.
• By accessing the source attribute of the message event, you can obtain the proxy object of the window of the message sending source.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
