20

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?

forresto
  • 10,895
  • 6
  • 41
  • 62
  • Don't think that is possible. The window can receive `message` events from anywhere. If you have a workaround, that is probably ok. – Paul Grime Apr 28 '13 at 19:50
  • 1
    Just for the sake of curiosity, how do you do your workaround? – zer00ne Dec 02 '15 at 01:25
  • I know this is super old, but if you have control of the framed content, you can use the [Channel Messaging API](https://developer.mozilla.org/en-US/docs/Web/API/Channel_Messaging_API) to set up distinct channels with separate event listeners for each frame. – robyoder Jan 26 '21 at 22:32

7 Answers7

66

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.

Example:

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

    // ...
});
Congelli501
  • 1,953
  • 1
  • 23
  • 28
10

If the src attribute of each iframe is unique then you can try this:

On the child:

function sendHeight() {
  // sends height to parent iframe
  var height = $('#app').height();
  window.parent.postMessage({
    'height': height,
    'location': window.location.href
  }, "*");
}

$(window).on('resize', function() {
  sendHeight();
}).resize();

On the parent:

$(window).on("message", function(e) {
    var data = e.originalEvent.data;
    $('iframe[src^="' + data.location + '"]').css('height', data.height + 'px');
});

The child sends it's height and URL to the iframe parent using postMessage(). The parent then listens for that event, grabs the iframe with that URL and sets the height to it.

Jan Werkhoven
  • 2,121
  • 1
  • 17
  • 29
  • Although I'm not sure your answer addresses the OP's question very well, I find your code useful to me personally--upped, thanks. – zer00ne Dec 02 '15 at 01:28
  • I guess I could strip out the height bits. Shall I? – Jan Werkhoven Dec 02 '15 at 04:52
  • I think the OP simply wants individual eventListeners for each iframe, but it'd be useless since multiple eventListeners listening on any iframe would be a duplicate because it's the same event. Any duplicated eventListeners are just wasted spice since only one will work whilst any duplicates will be ignored. – zer00ne Dec 02 '15 at 17:35
6

Actually you can. Add a unique name attribute to each iframe. iframe name is passed down to the contentWindow. So inside iframe window.name is the name of the iframe and you can easily send it in post message.

Maciej Krawczyk
  • 10,012
  • 5
  • 30
  • 38
2

You could use e.originalEvent.origin to identify the iframe.

On the iframe child:

window.parent.postMessage({
  'msg': 'works!'
}, "*");

On the iframe parent:

Javascript

window.addEventListener('message', function(e) {
  console.log(e.origin); // outputs "http://www.example.com/"
  console.log(e.data.msg); // outputs "works!"
  if (e.origin === 'https://example1.com') {
    // do something
  } else if (e.origin === 'https://example2.com'){
    // do something else
  }
}, false);

jQuery

$(window).on('message', function(e) {
  ...
}, false);

So origin contains the protocol and domain from which the postMessage() was fired from. It does not include the URI. This technique assume all iframes have a unique domain.

Jan Werkhoven
  • 2,121
  • 1
  • 17
  • 29
  • 1
    Does `e.originalEvent.origin` return a url as a result of being a serialized string? I'm not all that familiar with jQuery and all I find on that is it returns certain properties inside an objectEvent that was wrapped up for convenience by jQuery. So `origin` actually can show an event's `location.protocol + location.hostname`? – zer00ne Dec 02 '15 at 17:26
1

No, it's not possible. Best you can do is to have a single handler that routes received messages to helper handlers based on the origin of the message sender.

Ivan Zuzak
  • 15,222
  • 2
  • 60
  • 53
  • 6
    Can be done by setting a unique name attribute for each iframe. Then inside iframe window.name is the name of the iframe and can be send with postMessage. – Maciej Krawczyk Feb 07 '17 at 13:15
  • The comment above should be an answer it's the best solution of all. – kursus Dec 11 '19 at 20:33
  • The (currently) highest rated answer shows that it is possible by applying a source filter to the event. – BenjaminH Sep 10 '20 at 14:47
1

One way of detecting where the message came from is by checking which iframe is focused or for my specific scenario which iframe is visible.

Dan Ochiana
  • 2,827
  • 1
  • 26
  • 25
0

I implemented an iframe proxy. Iframe with in an iframe ( nesting them ). Each iFrame proxy creates it's own unique I'd. Than every message that is sent from child iframe to parent is gets an added field of the iframe proxy I'd. In the parent you then route every message from the iframeproxy to it's dedicated handler. This mechanism separate iframes perfectly

Avi rubinstein
  • 1