{"id":2044,"date":"2012-06-08T15:08:15","date_gmt":"2012-06-08T13:08:15","guid":{"rendered":"http:\/\/www.nyamsprod.com\/blog\/?p=2044"},"modified":"2012-06-08T15:26:41","modified_gmt":"2012-06-08T13:26:41","slug":"introduction-to-window-postmessage","status":"publish","type":"post","link":"https:\/\/nyamsprod.com\/blog\/introduction-to-window-postmessage\/","title":{"rendered":"introduction to window.postMessage"},"content":{"rendered":"
\n

Attention:<\/strong> Les informations de ce billet sont susceptibles d'être obsolètes car vieux de plus 2 ans.<\/p>\n

Warning: <\/strong> The information you are reading may be obsolete, this post was published more than 2 years ago.<\/p>\n<\/div>

The problem<\/h2>\n

Imagine you have one page (A) with an iframe (B) in it and you want an action taking place on B to have an impact on A. This will always work if A and B are on the same domain, but once they are on 2 differents domains it does not work anymore for security reasons<\/strong>.<\/p>\n

The solution<\/h2>\n

We are going to use the postMessage<\/code> API. Luckily for us, this API is available in all modern browser including IE8+.<\/strong> Below You’ll find an example on how to implement this API using jQuery.<\/p>\n

The code<\/h2>\n

My page is hosted on http:\/\/www.nyamsprod.com<\/code> domain but my iframe is hosted on http:\/\/media.tshoboo.com<\/code>. In the example I’ll trigger the parent background-color<\/code> change from the iframe.<\/p>\n

Here’s the idea behind the code: the source window (the iframe) sends a message to the target window (the parent window). When the target window receives the message it validates it and, only if it is issued by the correct origin domain, acts depending on the data it contains.<\/p>\n

The only reason I used jQuery is because IE8 does not support W3C Event Model.<\/em><\/p>\n

The Code found on the Iframe window (The Source Window)<\/em><\/p>\n

\/\/this should work only if the page is included as an iframe<\/em>\r\nif (top != self) {\r\n\tjQuery(function($){\r\n\t\t\/\/Feature detection if PostMessage is not supported on the browser we just ignore everything<\/em>\r\n\t\tif (!!window.postMessage) {\r\n\t\t\t$('.submit').click(function(){\r\n\t\t\t\t\/\/We are using the parent<\/code> object because this iframe is sending the message to its parent \/\/'*' is used so that the message is broadcasted to any parent who may use it \/\/In a real example do not use '*' it may become a vector for security problems<\/em>\r\n\t\t\t\tparent.postMessage(myMessage<\/em>, '*'); \/\/myMessage should be define in your function<\/em>\r\n\t\t\t});\r\n\t\t}\r\n\t})\r\n}<\/pre>\n
The Code found on the parent window (The Targeted Window)<\/em><\/p>\n
jQuery(function($){\r\n\t$(window).bind('message', function(event){\r\n\t\tvar color,\r\n\t\t\toEvent = event.originalEvent; \/\/because jQuery supercharge the DOM event you need to look at event.originalEvent<\/em>\r\n\t\tif (oEvent.origin<\/em> != 'http:\/\/media.tshoboo.com') { \/\/ This is for SECURITY NEVER REMOVE THIS<\/em>\r\n\t\t\treturn false;\r\n\t\t}\r\n\t\t\/\/Now you can act on the page depending on the Message received<\/em>\r\n\t\tif (color = oEvent.data<\/em>.match(\/^\\#[0-9A-Za-z]{6})$\/)) { \/\/oEvent.data = myMessage<\/em>\r\n\t\t\t$('html').css({'background-color':color[0]});\r\n\t\t}\r\n\t});\r\n});<\/pre>\n
The Demo<\/h2>\n
So now place for the demo<\/a>, if you analyze my demo you’ll find out that not only does the iframe<\/code> can trigger some changes on its parent but in response the parent also can trigger the same event on the iframe<\/code>.<\/p>\n","protected":false},"excerpt":{"rendered":"
How to communicate between 2 windows from 2 separate domains in JavaScript using window.postMessage API<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"categories":[5],"tags":[734,256,732,292,731,733],"class_list":["post-2044","post","type-post","status-publish","format-standard","hentry","category-web","tag-api","tag-html5","tag-iframe","tag-javascript","tag-postmessage","tag-security"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/nyamsprod.com\/blog\/wp-json\/wp\/v2\/posts\/2044","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/nyamsprod.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/nyamsprod.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/nyamsprod.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/nyamsprod.com\/blog\/wp-json\/wp\/v2\/comments?post=2044"}],"version-history":[{"count":5,"href":"https:\/\/nyamsprod.com\/blog\/wp-json\/wp\/v2\/posts\/2044\/revisions"}],"predecessor-version":[{"id":2053,"href":"https:\/\/nyamsprod.com\/blog\/wp-json\/wp\/v2\/posts\/2044\/revisions\/2053"}],"wp:attachment":[{"href":"https:\/\/nyamsprod.com\/blog\/wp-json\/wp\/v2\/media?parent=2044"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/nyamsprod.com\/blog\/wp-json\/wp\/v2\/categories?post=2044"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/nyamsprod.com\/blog\/wp-json\/wp\/v2\/tags?post=2044"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}