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

Today, I will talk to you about how to use postMessage API in HTML5. Many people may not know much about it. In order to make you understand better, the editor has summarized the following content for you. I hope you can get something according to this article.

About postMessage

Although window.postMessage is said to be a function of html5, it supports IE8+,. If your website does not need to support IE6 and IE7, then you can use window.postMessage. With regard to window.postMessage, many friends say that it can support cross-domain. Yes, window.postMessage is a direct data transfer between client and client, which can be transferred either across domains or in the same domain.

Application scenario

I'm just going to give a simple application scenario, and of course, this feature can be used in many places.

If you have a page, get part of the user information on the page, click to go to another page, the other page is not available by default, you can send part of the user information to this page through window.postMessage. (of course, you have to consider aspects such as security. )

Code example

Send a message:

JavaScript Code copies content to the clipboard

}, 1000)

/ / A new window pops up: var domain = 'http://haorooms.com'; var myPopup = window.open (domain +' / windowPostMessageListener.html','myWindow'); / / periodically send messages setTimeout (function () {/ / var message = 'current time is' + (new Date (). GetTime ()); var message = {name: "site", sex: "male"} / / you can also pass some data here, such as console.log such as obj ('data passed is' + message); myPopup.postMessage (message,domain)

To delay, we usually use timer setTimeout to delay retransmission.

Accepted page

JavaScript Code copies content to the clipboard

/ / listen to the message feedback window.addEventListener ('message',function (event) {if (event.origin! = =' http://haorooms.com') return; / / this determines whether the console.log ('received response:', event.data);}, false) is transferred from my domain name.

As shown in the following figure, accept the page to get the data

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

JavaScript Code copies content to the clipboard

/ / capture iframe var domain = 'http://haorooms.com'; var iframe = document.getElementById (' myIFrame'). ContentWindow; / / send message setTimeout (function () {/ / var message = 'current time is' + (new Date (). GetTime ()); var message = {name: "site", sex: "male"} / / you can also pass some data here, obj and other console.log ('the data passed is:' + message); / / send the message and target URI iframe.postMessage (message,domain);}, 1000)

Accept data

JavaScript Code copies content to the clipboard

/ / respond to the event window.addEventListener ('message',function (event) {if (event.origin! = =' http://haorooms.com') 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.

Call instance

1. Create a Worker instance in the main thread and listen for onmessage events

JavaScript Code copies content to the clipboard

Test Web worker function init () {var worker = new Worker ('compute.js'); / / event parameter has the data attribute, which is the result data returned in the child thread worker.onmessage= function (event) {/ / add the result returned by the child thread to the div document.getElementById ("result") [xss_clean] + = event.data+ ";};}

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.