In the previous article, it talks about the browser's homologous strategy, that is, preventing each other's methods and attributes from accessing to each other's pages, and explaining the solution to the solution to the cross -domain problems of homologous strategies: sub -domain agency, JSONP, JSONP , Cors. This article will explain in detail html5 Window.postmessage. With the PostMessage API, cross -domain communication can be achieved in a safe and controllable manner. The third -party JavaScript code can also communicate with the external document loaded in the iframe.
Html5 Window.postmessage APIHTML5 Window.postMessage is a safe, event -based message API.
PostMessage send messageThe postmessage method is called at the source window that needs to send a message to send a message.
Source windowThe source window can be a global Window object or the following type of window:
Iframe in the document window:
var iframe = document.GetelementByid ('My-Iframe'); var win = iframe.documentwindow;JavaScript open pop -up window:
var win = window.open ();
The father window of the current document window:
var win = window.parent;
Open the window of the current document:
var win = window.opner ();
After finding the source Window object, you can call the PostMessage API to send a message to the target window:
`` `Win.postmessage ('Hello', 'TTP://jhssdemo.duapp.com/');` `` `` `` `` `` `PostMessage function receives two parameters: the first is the message to be sent, and the second is the source of the source window.
Note: Only when the source of the target window is matched with the source parameter value passed in the PostMessage function, the message can be received.
Receive postmessage messagesTo receive messages from the previous source window through Postmessage, you only need to register the MESSAGE event in the target window and bind the event monitoring function to obtain the message in the function parameter.
Window.Onload = Function () {Var Text = Document.GetelementByid ('TXT'); Function Receivemsg (E) {console.log (get a message!); Sage: + E.Data); console. log (norigin: + e.origin); // console.log (source: + e.Source); text.innerhtml = Got A message! <br> + Message: + E.Data + <br> Origin: + E. .origin;} if (window.addeventListener) {// register the message event for the window, and bind the monitoring function window.addeventristener ('message', Receivemsg, FALSE);} else {window.at Tachevent ('Message', Receivemsg) ;}};The MESSAGE event monitoring function receives a parameter, an Event object instance, which has three attributes:
Source window
<! Doctype html> <html Lang = EN> <Head> <Meta Charset = UTF-8> <Title> HTML5 POSTMESSAGE </Title> <Style> #OTHERWIN {Width: 600px; Height: 400px; BA ckground-color: # cccccc;} </style> </head> <body> <Button ID = BTN> Open </Button> <Button ID = Send> Send </Button> <! ) -> <iframe src = http://jhssdemo.duapp.com/demo/h5_postmessage/win.html id = otherwin> </iframe> <br/> <br/> " <input type = Button value = send to child.com id = sendMessage /> <script> Window.Onload = Function () {var btn = document.GetelementByid ('btn'); jtn_send = document.GetelementByid ('Send' );; Var Win; BTN.Onclick = Function () {// Open the receiving message target window through Window.open ('http: //jhssdemo.duapp .com/demo/h5_postmessage/win.html ',' popup '); : // jhssdemo. duapp.com/ ');} Function Sendit (E) {// Send data Document.GetelementByid (Otherwin) .Contentwindow .postmersage (Otherwin) d (message). Value, http://jhssdemo.duapp .com/);} Sendbtn.onClight = Function (E) {Sendit (E);}; </script> </body> </html>Target window win.html
<! Doctype html> <html Lang = EN> <Head> <Meta Charset = UTF-8> <Title> HTML5 POSTMESSAGE </Title> <Style> #Txt {width: 500px; 300px; Backg Round-COLOR: # cccccc;} </style> </head> <body> <h1> the new window </h1> <div ID = txt> </div> <script> Window.Onload = Function () {var text = document. GetelementByid ('TXT'); // Surveillance function, receive a parameter-EVENT event object Function Receivemsg (E) {console.log (GOT A Message!); Console.log (NMESSAGE: + E.Data); Con sole. log (norigin: + e.origin); text.innerhtml = Got A message! <br> + Message: + E.Data + <br> Origin: + E.origin;} if (Window.addeventListener) {// Window register for the MESSAGE event and bind the monitoring function Window.adDeventListener ('message', Receivemsg, FALSE);} Else {Window.attachevent ('Message', ReceiveMSG); }}; </script> </body> </html " reviewThrough the study of this article, I learned about using the PostMessage API to use HTML5 to communicate between the windows, and I also know that it can be used to realize cross-domain communication; modern browsers basically support PostMessage, and for some old browser such as IE7-, you can use it. There are certain alternatives to communicate data, such as Window.name, URL query characters and hash fragments.
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.