Passing events from iframe to parent

Question

I try to load an iframe which inside I trigger my custom events, those events need to be captured in a parent DOM and activate functions there.

I tried to look for different approaches but none worked, I know I can call parent.postMessage(), but the issue is I dont know how many parents (generations) I have.

I would like to just call postMessage(), and it will propogate to all parents and captured on those who listen to the event.

Is this possible at all?

Answer 1

Been a while since I've had to do anything like this, but I think you'd need to control this the other way around, so trigger the events at window scope within the iframe, and handle the events within the parent frame.

//Inside iFrame
$(window).trigger('myevent', { a: 'b' });

//In parent document
$('#myIframe').on('myevent', function(e) {
    //Handling the event.
});