Javascript: listen for postMessage events from specific iframe


I have multiple iframes in a page. Now I have one message event listener for the page, which gets the messages from all of the iframes. I have a workaround to know from which iframe the message is coming.

I would like to make event listeners for each iframe separately. Is this possible?

Best Solution

You must listen on the global message event of the window object, but you can filter the source iframe using the source property of MessageEvent.


const childWindow = document.getElementById('test-frame').contentWindow;
window.addEventListener('message', message => {
    if (message.source !== childWindow) {
        return; // Skip message in this event listener

    // ...