How to send an event from a custom visualization component (in a tile of an sso embed dashboard inside the iframe) to parent web page

[Jun_Lu]

I have a custom visualization component created. I put it in a tile of an sso embed dashboard (inside an iframe). I wanted to send an event from the tile to the parent page of the sso embed dashboard but failed to do so. 

The iframe is defined (in Angular) as:

<iframe id="looker-iframe" [src]="targetUrl | safe" title="Dashboard" sandbox = "allow-same-origin allow-scripts" (load)="attachEventListener()"></iframe>

The following code is used in updateAsync() of a Looker custom vis component .ts file. It’s assumes that a message is sent to the parent page when user clicks on some svg inside the vis component.

window.postMessage(message, '*'); //Here message is a stringified json object.

At runtime, the sso embed dashboard is shown correctly and custom vis in shown correctly as well in a tile.  My console.log() output shows that onClick() is triggered but  the parent page of the iframe can’t receive the  message event.

Any idea why window.postMessage(message, '*') doesn’t work for iframe → parent event sending?

I even tried window.parent.postMessage(message, '*') but it’s not working either.

Thanks,

Jun