HTML5 Web Messaging

messages

Level: intermediate

Web Messaging (or cross-document messaging) it’s the API introduced to the HTML5 specification, allowing documents from various sources / domains to communicate in a secure manner. This is the basic level of security that allows to operate over the cross-site scripting protection level.

HTML5 Web Messaging

The basic method is postMessage, allowing to establish communication. Importantly, we have to access the Window object of the target document.

A simple example:

var o = document.getElementsByTagName('iframe')[0];
o.contentWindow.postMessage('Hello!', 'http://the-site.com/'); 

But let’s look at specific, ready examples.

One of the best I have found on teamtreehouse:

http://blog.teamtreehouse.com/cross-domain-messaging-with-postmessage

working example can be started directly at codepen.io.

The whole works very well, and the example can be a base for our further solutions.


Resources

– interesting demo of capabilities on codeproject:

http://www.codeproject.com/Articles/248264/HTML-WebMessaging-Experiment

– a small buy useful tutorial:

http://klanguedoc.hubpages.com/hub/HTML5-Cross-Document-Messaging-Tutorial

– Dev Opera:

https://dev.opera.com/articles/window-postmessage-messagechannel/

Summary

HTML5 Web Messaging is a very interesting feature worth remembering. It can be a quick way to get out of the problematic situation. And if we can – let’s use it.

Web and Mobile Software Developer, with years of experience. My biggest passions are programming, new technologies, e-commerce, as well sports, cars, and of course my family.

Facebook Twitter LinkedIn Google+ Skype Xing 

Share: Share on Facebook4Tweet about this on TwitterShare on Google+0Share on LinkedIn2Share on Tumblr0Digg thisEmail this to someonePin on Pinterest1
Both comments and pings are currently closed.

Comments are closed.