Communication between parent and child inline frames using postMessage

In my prototype i have a child inline frame which has many widgets. What i want is on clicking some button it should change appearance or state of the widget inside

I already used javascript like below to access the content
Parent to Child Frame
javascript: $axure('@MainContentFrame).$().children()[0].contentWindow.$axure('@ChildFrameIdentifier').$().children()[0].contentWindow.$axure('@BtnName').click();

Child to Parent Frame
javascript: window.parent.parent.$axure('@EventObserver').SetPanelState('4',{});

Above works fine when using in Axure Preview Mode in Google Chrome. But once we generate HTML files and then launch the prototype they do not work in chrome since Gooogle Chrome limits cross frame access due to web security. I have tried other browser like Firefox and IE but they have their own limitations

Hence i wanted to give a try using traditional html postMessage between frames. But they are not working.
Anybody tried out this approach ?

Below is the sample I tried

iFRameCommunication.rp (55.7 KB)