Search code examples
javascriptajaxjquerybrightcove

How to recognize an Ajax update in a 3rd party iframe

When the page loads it includes an 3rd party iframe (read: file uploader). I select a file, click the "start upload" button and once the upload is complete I get a "thank you - upload complete" message.

  • There is no Ajax response (that I know of).

  • The 3rd party does allow me to specify the message. I can also add ... to that message.

Once the upload is complete I need to update a hidden input with the upload_file_id which I know from the start. What I wanting to catch / use if the "upload complete" message / moment / event. But the dynamic-ness of the page is somewhat new to me and I could use some support.

Thanks in advance.

Solution

  • Unfortunately, you wont be able to access any useful properties of the iframe unless it is within the same host/domain as your code. This is a security feature implemented by all current/worthy browsers - called the same-origin or cross-domain policy.

    The only options you have of detecting the changes in a third-party iframe are if the third-party code supports sending a message out to the surrounding frame. There are a few ways of doing this, but they need to support it. If they don't, there isn't much you can do. If it were me I would check the following:

    1. Read the third-party documentation, see if they support triggering any js messages or events
    2. See if the third-party system offers another way, beside iframe, to implement the same ability.

    script tags?

    With regard to the message you can add, have you tested to see if you can add any HTML tags to that message? It's unlikely, but if so, you could add your own script tag to communicate back to your frame, to trigger your own function (i.e. `window.iframeSuccess`) and tell you the event has occured...


    The following code will only work - again - if both sides are of the same domain (the outer frame and the iframe). Otherwise it'll be blocked by the same-origin policy.

    <script>
if( window && window.parent && window.parent.iframeSuccess ){
  window.parent.iframeSuccess();
}
</script>

    Instead you could implement the following which has been designed precisely for the communication between frames. It's a more modern solution so wont work on older browsers - to see what supports it you could read here:

    What browsers support the window.postMessage call now?

    An example of how to use window.postMessage - first the code in the outer frame:

    function messageListener(event){
  /// make sure we only get messages from where we expect
  if ( event.origin != "http://the-domain-we-expect-from.com" ){ return; }
  /// here you can do what you want depending on the message you get
  alert(event.data);
}

/// define for nearly every modern browser
if (window.addEventListener){
  addEventListener("message", messageListener, false);
} else {
  /// fallback for internet explorer
  attachEvent("onmessage", messageListener);
}

    Then the code placed in the iframe:

    if( window && window.parent && window.parent.postMessage ){
  window.parent.postMessage('success', 
     'http://the-domain-we-are-sending-to.com');
}

    for more information you can read here:

    https://developer.mozilla.org/en-US/docs/DOM/window.postMessage

    image tag?

    If they block script tags it's possible they may allow image tags. If this is the case you have a slightly trickier option available which is to embed an image that reports back to a server-side script, which can then flag the event in a database...

    <img src="http://mysite.com/image-that-is-actually-a-script.php?id=user-id" />

    however to get your javascript to notice this event you will need some sort of polling system that is constantly checking your server-side database from your js (via ajax or websockets) - and you will need to be able to uniquely identify the user on both sides (yours and the third-party) with an id of some sort. So this method is really only possible if the third-party system allows you to insert the user id (or some other unique user information) into the message shown to the user. This is pretty much a last fallback if you have no other option.