第三者のIFrameでAjaxアップデートを認識する方法

Question

ページがロードされているときには、3番手の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.