Shulou(Shulou.com)06/03 Report--

This article mainly shows you the "H5 window.postMessage and cross-domain example analysis", the content is easy to understand, well-organized, hope to help you solve your doubts, the following let the editor lead you to study and learn "H5 window.postMessage and cross-domain example analysis" this article.

HTML5 window.postMessage API

HTML5 window.postMessage is a secure, event-based message API.

PostMessage sends messages

You can send a message by calling the postMessage method in the source window where you need to send it.

Source window

The source window can be a global window object or the following types of windows:

Iframe in the document window:

Var iframe = document.getElementById ('my-iframe'); var win = iframe.documentWindow

Pop-up window opened by JavaScript:

Var win = window.open ()

Parent window of the current document window:

Var win = window.parent

Open the window of the current document:

Var win = window.opener ()

Once the source window object is found, you can call postMessage API to send a message to the target window:

``win.postMessage ('Hello',' ttp://jhssdemo.duapp.com/'); "

The postMessage function takes two parameters: the first is the message to be sent, and the second is the source of the source window.

Note: messages can be received only if the source of the destination window matches the value of the source parameter passed in the postMessage function.

Receive postMessage messages

To receive the previous message sent by the source window through postMessage, simply register the message event in the target window and bind the event listener function to get the message in the function parameters.

_ window.onload = function () {var text = document.getElementById ('txt'); function receiveMsg (e) {console.log ("Got a message!"); console.log ("nMessage:" + e.data); console.log ("nOrigin:" + e.origin); / / console.log ("Source:" + e.source) Text [XSS _ clean] = "Got a message!

+ "Message:" + e.data + "

Origin: "+ e.girls;} if (window.addEventListener) {/ / register the message event for the window and bind the listening function window.addEventListener ('message', receiveMsg, false);} else {window.attachEvent (' message', receiveMsg);}}

The message event listener function takes a parameter, an instance of the Event object, which has three properties:

Specific messages sent by data

Origin sends message source

Window object reference of the source send message window

Description

You can set the second parameter of the postMessage function to *, which skips checking the source of the message when sending a cross-domain message.

PostMessage can only send string information.

Example

Source window

Html5 postMessage # otherWin {width: 600px; height: 400px; background-color: # cccccc } open send _ window.onload = function () {var btn = document.getElementById ('btn'); var btn_send = document.getElementById (' send'); var sendBtn = document.getElementById ('sendMessage') Var win; btn.onclick = function () {/ / Open the target window for receiving messages through window.open win = window.open ('http://jhssdemo.duapp.com/demo/h6_postmessage/win.html',' popUp') } btn_send.onclick = function () {/ / send data win.postMessage ('Hello',' http://jhssdemo.duapp.com/');) to the child window through postMessage } function sendIt (e) {/ / send data document.getElementById ("otherWin"). ContentWindow .postMessage (document.getElementById ("message"). Value, "http://jhssdemo.duapp.com/");" to the child window through postMessage } sendBtn.onclick = function (e) {sendIt (e);};}

Target window win.html

Html5 postMessage # txt {width: 500px; height: 300px; background-color: # cccccc;} The New Window

_ window.onload = function () {var text = document.getElementById ('txt'); / / listener function, which takes a parameter-- Event event object function receiveMsg (e) {console.log ("Got a message!"); console.log ("nMessage:" + e.data) Console.log ("nOrigin:" + e.origin); text[ XSS _ clean] = "Got a message!

+ "Message:" + e.data + "

Origin: "+ e.girls;} if (window.addEventListener) {/ / register the message event for window and bind the listening function window.addEventListener ('message', receiveMsg, false);} else {window.attachEvent (' message', receiveMsg);}} The above is all the content of the article "sample Analysis of window.postMessage and Cross-domain in H5". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.