I am writing a widget which gets embedded on other pages (on other domains) via an iframe. A click anywhere on the widget/iframe should bring up a dialog. The dialog does not fit in the dimensions of the iframe.
-
I cannot trigger the dialog from inside the widget/iframe since it will get clipped by the iframe dimensions.
-
A user of the widget also includes a JS from my site. But I cannot listen to onclick events on the iframe (on the host page) since they aren’t any onclick events on an iframe.
What’s a good, secure way of resolving this which will reliably work on all modern browsers?
Have a look at these PostMessage plugins 1 / 2 which allow you to communicate i.e. pass messages between an iFrame on another domain and the parent page.
This means you can listen for the click on the iFrame, then send a message to the parent. When the parent receives that message, it can then show a dialog