The browser cannot communicate with Js in different domains, for example:
The deployment address of main.htm is http: // 127.0.0.1: 8080/main.htm.
The deployment address of subpage.htm is http: // localhost: 8081/subpage.htm.
Main.html code <! Doctype HTML public" -// W3C // dtd xhtml 1.0 transitional // en "" Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "> <HTML xmlns =" Http://www.w3.org/1999/xhtml "> <Head> <title> This is parent page "); Document. getelementbyid ('inputparent '). Value = S document. Title = s ;}</SCRIPT> <input type =" Text "Name =" Inputparent "Id =" Inputparent "/> <Input type =" Button " Value =" Send "Id =" Btnsend "/> <H2> </H2> <IFRAME id =" Iframe1 "Src =" Http: // localhost: 8081/subpage.htm "> </Iframe> </body>
Subpage.htm < ! Doctype HTML public "-// W3C // dtd xhtml 1.0 transitional // en" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" > < Html Xmlns = Http://www.w3.org/1999/xhtml" > < Head > < Title > </ Title > </ Head > < Body > < Input Type = "Text" Name = "Inputchile" ID = "Inputparent" /> < Input Type = "Button" Value = "Send" ID = "Btnsend" Onclick = "Javascript: sendmessage ()" /> < Script > Function sendmessage () {var S = document. getelementbyid ("inputparent "). value; alert (s); window. top. resivemessage (s); // call the resivemessage method of the parent window} </ Script > </ Body > </ Html >
Visit the Home Page http: // 127.0.0.1: 8080/main.htm. Click send button on the subpage to report a cross-origin access permission error (Google Chrome is used)
Subpage.htmUnsafe JavaScript attempt to access frame with URL http: // 127.0.0.1: 8080/main.htm from frame with URL http: // localhost: 8081/subpage.htm. domains, protocols and ports must match.
HTML5 provides the window. postmessage () method for cross-origin access to send messages and listen to event messageevent
Modify the main.htm pageCode
Main.htm after modification < ! Doctype HTML public "-// W3C // dtd xhtml 1.0 transitional // en" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" > < Html Xmlns = Http://www.w3.org/1999/xhtml" > < Head > < Title > </ Title > </ Head > < Body > < H2 > </ H2 > < Script > VaR target = "http: // localhost: 8081"; // valid message source function resivemessage (s) {alert ("this is parent page"); document. getelementbyid ('inputparent '). value = s document. title = s;} function listener (e) {If (E. origin = target) {// identify the message source. if the source is valid, process the message resivemessage (E. data);} else {// The message source is invalid. // do nothing here} window. addeventlistener ("message", listener, true); // Add a message listening event </ Script > < Input Type = "Text" Name ="Inputparent" ID = "Inputparent" /> < Input Type = "Button" Value = "Send" ID = "Btnsend" /> < H2 > </ H2 > < IFRAME ID = "Iframe1" SRC = & Quot; http: // localhost: 8081/subpage.htm & quot" > </ IFRAME > </ Body > </ Html >
Subpage.htm after modification < ! Doctype HTML public "-// W3C // dtd xhtml 1.0 transitional // en" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" > < Html Xmlns = Http://www.w3.org/1999/xhtml" > < Head > < Title > </ Title > </ Head > < Body > < Input Type = "Text" Name ="Inputchile" ID = "Inputparent" /> < Input Type = "Button" Value = "Send" ID = "Btnsend" Onclick = "Javascript: sendmessage ()" /> < Script > VaR target = "http: // 127.0.0.1: 8080/subpage.htm"; function sendmessage () {var S = document. getelementbyid ("inputparent "). value; alert (s); window. top. postmessage (S, target); // use the postmessage method on the parent page to send messages} </ Script > </ Body > </ Html >
The above demo was tested in ie9 and Google Chrome.
In subpage, the postmessage method in main.htm is used to send data, and then the messageevent event is used to listen.
That is to say, HTML5 provides a cross-origin access interface postmessage and an event messageevent that listens to cross-origin messages. The postmessage method is used to receive messages, and messageevent is used to process messages.
I did not find the HTML5 offline version of the SDK, which God has sent a copy to me (xuf22@126.com), thank you
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
