Iframe Communication, SOP and Cross-window messaging

With conventional javascript API or jQuery, one cannot make cross document messaging between iframes or windows because of the SOP (Same Origin Policy).
There used to be some tweaks like applying sandbox attribute, for eg.

<iframe sandbox="allow-scripts allow-same-origin" src="" />

or browser specific commands like --disable-web-security while lunching chrome
and some jQuery functions like

$('iframe#myIframe').contents().on("click","input#clickme",function(){alert('u click me');});

Unfortunately, those may no longer work on modern browsers, one may want to apply further tricks to deal with security measures.

Thanks to HTML5 API's window.postMessage, below is a working example for Cross Domain - Html5 postMessage.

Let's say I'm running two web servers locally on port 81 and 8080,
we'll have something like http://localhost:81/site1/index.html

<input type="button" id="clickme" value="click me" onclick="doPostMessage();" />
<span id="data" style="color:red;"></span>
<iframe id="site2" height="180" src="http://localhost:8080/site2/index.html" width="100%"></iframe>
<script type="text/javascript"> 
 function doPostMessage(){
  frames[0].postMessage("Hello child!","http://localhost:8080/");
 } 
 window.onmessage = function(e) {
  console.dir(e);
  var data = "Parent: i ve got sth from child.\n Data: ";
  if(e.origin == 'http://localhost:8080') {
    data += e.data;
  }
  document.getElementById('data').innerHTML = data;   
 }
</script>

And we have another page at http://localhost:8080/site2/index.html

<input type="button" id="clickme" value="click me" onclick="doPostMessage()"/>
<span id="data" style="color:red;"></span>
<script type="text/javascript">
 function doPostMessage(){
  parent.postMessage("Hello parent!","http://localhost:81/");
 }
 window.onmessage = function(e) {
  console.dir(e);
  var data = "Child: i ve got sth from parent.\n Data: ";
  if(e.origin == 'http://localhost:81') {
    data += e.data;
  }
  document.getElementById('data').innerHTML = data;
 }
</script>

Also, for security concerns, a must read article you can find it here.

Let's see a few slides embedded below if you want to read more about iframe communication.

AngularJS and Object.observe()

Another cool presentation at JSConf EU, a nice talk on AngularJS and Object.observe() or O.o() which will provide you a better understanding for developing client side MVC applications.

Common Errors Importing DataBases in phpMyAdmin

If you have just installed XAMPP or WAMPP and going to use a vanilla phpMyAdmin, there are a few things you need to configure before you do something with the DataBase (especially when uploading / importing data to MySQL) and you might face some issues or errors as described below which are common to every novice.

---

Warning: POST Content-Length of xxxxxxxx bytes exceeds the limit of xxxxxxx bytes
You probably tried to upload a file that is too large. Please refer to documentation for a workaround for this limit.

KoLuNar on youtube :P

This is me when I was around 20th living in student accommodation, if you have some time on your hands, visit my profile on youtube here https://www.youtube.com/user/kolunar ;)

WordPress for Beginners

This article is intended for those who are new to WordPress or for those who are wondering about where to get started. The answer is very simple, just read the official online manual for WordPress including the WordPress information and documentation individually for users and developers, no kidding but seriously :D.

For those WordPress beginner bloggers, users or developer, I'd recommend one to try getting started with WordPress.com. Creating a WordPress.com account is simple and setting up a blog should be very straightforward getting through a few steps. The step by step instructions are available here.

Understanding Javascript Prototype, Static members and Instance

Since javascript is a prototype-based language, sometime it's confusing for anyone with the background from the class-based languages like C#, Java etc... to implement javascript in OOP way or to comply with software architectural patterns such as MVC, MVP or MVVM.

Today I found some useful snippets while looking for some meaningful explanation.
Here's the one explained by someone on stackoverflow,

// constructor function
function MyClass () {
  var privateVariable; // private member only available within the constructor fn

  this.privilegedMethod = function () { // it can access private members
    //..
  };
}

// A 'static method', it's just like a normal function 
// it has no relation with any 'MyClass' object instance
MyClass.staticMethod = function () {};

MyClass.prototype.publicMethod = function () {
  // the 'this' keyword refers to the object instance
  // you can access only 'privileged' and 'public' members
};

var myObj = new MyClass(); // new object instance

myObj.publicMethod();
MyClass.staticMethod();

You shall read the original thread here, for a more detail similar to the above example you can find it here.

Team GIGABYTE

The is the very first Flash animation project I have ever made while I was working for Media Lane. All trademarks mentioned in the clip belong to their respective owners. You shall view the swf version here.

http://www.swfcabin.com/swf-files/1399390177.swf