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

This article mainly explains "how to use postMessage to transfer data between two web pages in HTML5". Interested friends may wish to have a look. The method introduced in this paper is simple, fast and practical. Let's let the editor take you to learn how to use postMessage to transfer data between two web pages in HTML5.

Data sender

The first thing we need to do is create the communication initiator, that is, the data source "source". As the initiator, we can open a new window, or create an iframe, send data to the new window, for simplicity, we send it every 6 seconds, and then create a message listener to listen for its feedback from the target window.

JavaScript Code copies content to the clipboard

/ / A new window pops up

Var domain = 'http://scriptandstyle.com';

Var myPopup = window.open (domain

+'/ windowPostMessageListener.html','myWindow')

/ / send messages periodically

SetInterval (function () {

Var message = 'Hello! The time is:' + (new Date () .getTime ())

Console.log ('blog.local: sending message:' + message)

/ / send the message and target URI

MyPopup.postMessage (message,domain)

}, 6000)

/ / Monitor message feedback

Window.addEventListener ('message',function (event) {

If (event.origin! = 'http://scriptandstyle.com') return

Console.log ('received response:', event.data)

}, false)

I use window.addEventListener here, but it doesn't work in IE because IE uses window.attachEvent. If you don't want to determine the type of browser, you can use some tool libraries, such as jQuery or Dojo.

Assuming that your window pops up normally, we send a message-you need to specify the URI (protocol, host, port number, etc.) if necessary, and the message receiver must be on the specified URI. If the target window is replaced, the message will not be sent.

We also create an event listener to receive feedback. It is extremely important that you verify the URI of the source of the message! You can only deal with messages sent by the target party if it is legal.

If you are using iframe, the code should be written as follows:

JavaScript Code copies content to the clipboard

/ / capture iframe

Var domain = 'http://scriptandstyle.com';

Var iframe = document.getElementById ('myIFrame'). ContentWindow

/ / send a message

SetInterval (function () {

Var message = 'Hello! The time is:' + (new Date () .getTime ())

Console.log ('blog.local: sending message:' + message)

/ / send the message and target URI

Iframe.postMessage (message,domain)

}, 6000)

Make sure you are using the contentWindow property of iframe, not the node object.

Data receiver

The next thing we want to develop is the page of the data receiver. There is an event listener in the receiver window that listens for "message" events, just as you need to verify the address of the source of the message. The message can come from any address, and make sure that the message being processed is from a trusted address.

JavaScript Code copies content to the clipboard

/ / respond to events

Window.addEventListener ('message',function (event) {

If (event.origin! = 'http://davidwalsh.name') return

Console.log ('message received:' + event.data,event)

Event.source.postMessage ('holla back event. Origin)

}, false)

The above code snippet is feedback to the message source to confirm that the message has been received. Here are a few more important event properties:

Source-message source, sending window / iframe of the message.

Origin-the URI of the message source (which may contain protocols, domain names, and ports) to validate the data source.

Data-data sent by the sender to the receiver.

These three properties are the data that must be used in message transmission.

Use window.postMessage

Like other very web technologies, it can be dangerous to use this technology if you don't verify the validity of the data source; the security of your application requires you to be responsible for it. Window.postMessage is like PHP versus JavaScript technology.

At this point, I believe you have a deeper understanding of "how to use postMessage to transfer data between two web pages in HTML5". You might as well do it in practice. Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

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.