This is WebKit browsers specific (meaning that I only need to make it work in WebKit specific, i.e. iOS/Android browsers, but I'm testing in Chrome).

I have a page. The page loads one or more iframes, with contents from another domain. I need to receive messages (using postMessage()) from these iframes, and I need to be able to identify which iframe a specific message came from.

I can't find a way to do that that does not involve throwing something the iframe URL that the iframe contents then can pass back to me. I would like to not have to meddle with the URL, as there is no guarantee I can safely do that (redirects can throw the parameters out, for example).

I tried something that I thought was reasonable. When I create the iframe element (it's done from J/S), I associated a property with the element, let's say 'shared_secret'. When I get the message event back from the frame, I tried to locating the element that the calling frame was created with, and reading that property.

function onMessage(evt) {
  var callerId = evt.source.frameElement.shared_secret;
  // ....
}

window.addEventListener(message, onMessage);

var frameEl = document.createElement('iframe');
frameEl.shared_secret = 'sommething blue';
frameEl.src = '.html';
somewhereInMyDoc.appendChild(frameEl);

When the frame loads, it will run:

window.parent.postMessage('do you know who I am?', '*');

However, frameElement turns out undefined in the above onMessage(). I guess for the security reasons, it does work perfectly when the parent/child are from the same domain.

And it's actually ironic. Parent window can not access event.source.frameElement because event.source is an alien window. iFrame window can not call window.frameElement, because frameElement is in an alien window. So nobody can get access to it.

So, is there something that I can use as a token that I can set on a newly loaded frame, and somehow get back?

Thank you.

This is WebKit browsers specific (meaning that I only need to make it work in WebKit specific, i.e. iOS/Android browsers, but I'm testing in Chrome).

I have a page. The page loads one or more iframes, with contents from another domain. I need to receive messages (using postMessage()) from these iframes, and I need to be able to identify which iframe a specific message came from.

I can't find a way to do that that does not involve throwing something the iframe URL that the iframe contents then can pass back to me. I would like to not have to meddle with the URL, as there is no guarantee I can safely do that (redirects can throw the parameters out, for example).

I tried something that I thought was reasonable. When I create the iframe element (it's done from J/S), I associated a property with the element, let's say 'shared_secret'. When I get the message event back from the frame, I tried to locating the element that the calling frame was created with, and reading that property.

function onMessage(evt) {
  var callerId = evt.source.frameElement.shared_secret;
  // ....
}

window.addEventListener(message, onMessage);

var frameEl = document.createElement('iframe');
frameEl.shared_secret = 'sommething blue';
frameEl.src = 'http://aliens./my.html';
somewhereInMyDoc.appendChild(frameEl);

When the frame loads, it will run:

window.parent.postMessage('do you know who I am?', '*');

However, frameElement turns out undefined in the above onMessage(). I guess for the security reasons, it does work perfectly when the parent/child are from the same domain.

And it's actually ironic. Parent window can not access event.source.frameElement because event.source is an alien window. iFrame window can not call window.frameElement, because frameElement is in an alien window. So nobody can get access to it.

So, is there something that I can use as a token that I can set on a newly loaded frame, and somehow get back?

Thank you.

• javascript
• iframe
• webkit
• cross-domain
• frame

• are you trying to access the parent window from the child iframe or the other way around?. – Roman Commented Dec 14, 2011 at 6:29
• I'm not trying to access windows from each other, really. I use message API, but I need to know which of my children is making the call. And there is no way to in advance agree on identification strings. – Pawel Veselov Commented Dec 14, 2011 at 6:38
• Doesn't the event.origin field have the value you need? dev.w3/html5/postmsg/#dom-messageevent-origin – Roman Commented Dec 14, 2011 at 6:44
• 1 :) thank you! And, btw, origin wouldn't work with hashes. Origin returns domain only. For 'druid.vps/t/frame_in.html#abc={123,.42}', event.origin is 'druid.vps'. I make the frame pass me it's hash in the messages it sends, that's the only solution I found (still insufficient because of that server uncertainty) – Pawel Veselov Commented Dec 14, 2011 at 7:05
• 1 you can't loop through window.frames content windows and pare them to evt.source? – Daniel Moses Commented Dec 14, 2011 at 7:35

2 Answers 2

For people looking for some code, here is what I used to find the iframe who sent the message :

/**
 * Returns the iframe corresponding to a message event or null if not found.
 * 
 * 'e' is the event object
 */
function getFrameTarget (e) {
    var frames = document.getElementsByTagName('iframe'),
        frameId = 0,
        framesLength = frames.length;

    for (; frameId < framesLength; frameId++) {
        if (frames[frameId].contentWindow === e.source) {
            return frames[frameId];
        }
    }

    return null;
}

Thanks to Pawel Veselov and DMoses !

This should be credited to https://stackoverflow./users/695461/dmoses.

You can actually pare the content window object of the frame element to the event.source of the message event, and the parison will yield TRUE if they are, in fact, the same.

So, to solve my particular problem, I'll need to keep the list of frame elements that I've created (sprinkling them, if needed, with whatever additional properties), and when the event es in, iterating through all, looking for one that has its contentWindow property equal to the event.source property.

UPDATE

We did, through encountering some nasty bugs, also found out that you should put an 'id' on the iframe created from within the parent window. Especially if that window is itself in an iframe. Otherwise, certain (Android 4.x being known for sure) browsers will yield true parison even if the message is being received from a pletely different child frame.