Window.postmessage in HTML5, data transfer between two pages

Source: Internet
Author: User
Tags date current time log return window domain domain name client

About PostMessage

Window.postmessage is a HTML5 function, but support ie8+, if your site does not need to support IE6 and IE7, then you can use Window.postmessage. About Window.postmessage, a lot of friends say he can support Cross-domain, yes, Window.postmessage is the direct data transfer between client and client, which can be passed across domain or same domain. Application ScenariosI just give a simple application scenario, of course, this feature can be used in many places. If you have a page, the page to get some of the user information, click to enter another page, the other page default is not to get the user information, you can through the window.postmessage part of the user information uploaded to this page. (Of course, you have to consider security and so on.) ) Code example send a message:Pop up a new window var domain = "";   var mypopup = (domain + "/windowpostmessagelistener.html", "Mywindow");          Periodic send Message settimeout (function () {//var messages = "Current time is" + (new Date (). GetTime ()); var message = {Name: "site", Sex: "Male"};     You can also pass some data here, obj et console.log ("The data passed is" + message); Mypopup.postmessage (Message,domain); },1000); To delay, we generally use the timer settimeout delay and reuse. accepted pagesListen for message feedback Window.addeventlistener ("Messages", function (event) {if (Event.origin!== "") return;//This sentence Break It is not i this domain name jumps over the Console.log ("Received response:",;},false);

The following figure, accept the page to get the data

If you are using an IFRAME, the code should write this:Capture iframe var domain = "";   var iframe = document.getElementById ("Myiframe"). Contentwindow;          Send Message settimeout (function () {//var messages = "Current time is" + (new Date (). GetTime ()); var message = {Name: "site", Sex: "Male"};         You can also pass some data here, obj et console.log ("The data passed is:" + message);  Send the message and target URI iframe.postmessage (Message,domain); },1000);     Accept data//Response event Window.addeventlistener ("Message", function (event) {if (Event.origin!== "") return;     Console.log ("Message Received:" +,event); Event.source.postMessage ("Holla Back youngin!", event.origin); },false); The code snippet above is a feedback message to the source, and the confirmation message has been received. Here are some of the more important event properties: The source– message source, the sending window for the message/iframe. origin– The URI of the message source, which may contain protocols, domain names, and ports, to validate the data source. data– sends the data way sent to the receiving party.

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.