如何在第三方IFRame中识别AJAX更新

Question

当页面加载时，它包括第三方IFRAME（读取：文件上传器）。我选择文件，单击“开始上传”按钮，一旦上传完成，我就会收到“谢谢 - 上传完成”消息。

• 没有ajax响应（我知道）。

• 第三方确实允许我指定消息。我也可以添加......到该消息。

  一旦上传完成，我需要使用我从一开始就知道的upload_file_id更新隐藏的输入。如果“上传完整”消息/时刻/事件，我希望捕获/使用的是什么。但页面的动态性感对我来说有点新，我可以使用一些支持。

  提前感谢。

Answer 1

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.