Home > Developer > Web Develop
1. If you want to accept messages sent from other windows, you must monitor the message event of the Window object.
Window.addeventlistener ("Message", function () {},false);
Use the PostMessage method of the Window object to send messages to other windows.
Otherwindow.postmessage (Message,targetorigin);
Parameter: Message is the text of the messages sent, but can also be any JavaScript object;
The second parameter is the URL address of the object window that accepts the message.
Otherwindow is a reference to the Window object to be sent, you can return the object by window.open, or return the Window object to which a single frame belongs by making an ordinal or first name on the window.frames array.
New Two items: s1,s2
S1 and S2 send data to each other:
S1 in the index.html:
<!DOCTYPE HTML><HTML> <Head> <MetaCharSet= "Utf-8" /> <title></title> <Scripttype= "Text/javascript">Window.addeventlistener ("message",function(EV) {document.getElementById ("content"). InnerHTML=Ev.origin+">>>"+Ev.data; },false); functionHello () {variframe=window.frames[0]; Iframe.postmessage ("Dr. Sisi","http://127.0.0.1:8020/s2/1.html"); } </Script> </Head> <Body> <DIVNID= "Content"></DIVN> <iframesrc= "http://127.0.0.1:8020/s2/1.html"width= "100%"Height= "+"frameborder= "2"onload= "Hello ()"></iframe> </Body></HTML>
1.html in S2
<!DOCTYPE HTML><HTML> <Head> <MetaCharSet= "Utf-8" /> <title></title> <Scripttype= "Text/javascript">Window.addeventlistener ("message",function(EV) {document.getElementById ("h1cotent"). InnerHTML="from"+Ev.origin+"there came the news. "+Ev.data; Ev.source.postMessage ("Hello,XI Big ", Ev.origin); },false); </Script> </Head> <Body> <H1ID= "H1cotent"></H1> </Body></HTML>
Results:
Origin attribute: This is the sending meta, the sender of the site is not the same as the URL of the concept, send the original only includes the domain name and port number,
In order not to receive malicious messages sent from other sources, it is best to check the sending source.
Source property: You can get the window object that the message is sent to.
The message sent between the Web document and the Web document is not just a text message,
If you use the JSON object Stringify method to turn a JavaScript object into text, use the parse method of the JSON object
When you restore text to a JavaScript object, any JavaScript object can pass in this way between the Web document and the document, between the port and the port, and between the domain and the domain.
Cross-page message transfer in HTML5
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
