Как распознать обновление Ajax в стороннем iframe

Question

Когда страница загружается, она включает в себя сторонний iframe (читай: загрузчик файлов). Я выбираю файл, нажимаю кнопку "начать загрузку" и после завершения загрузки я получаю сообщение "спасибо - загрузка завершена".

• Нет ответа Ajax (о котором я знаю).

• Третья сторона позволяет мне указать сообщение. Я также могу добавить... к этому сообщению.

После завершения загрузки мне нужно обновить скрытый ввод с помощью upload_file_id, который я знаю с самого начала. Что я хочу поймать / использовать, если "загрузка завершена" сообщение / момент / событие. Но динамичность страницы несколько нова для меня, и я мог бы использовать некоторую поддержку.

Заранее спасибо.

Answer 1

К сожалению, вы не сможете получить доступ к любым полезным свойствам iframe, если он не находится в том же хосте / домене, что и ваш код. Это функция безопасности, реализованная всеми текущими / достойными браузерами - так называемая политика одного или нескольких доменов.

Единственные варианты обнаружения изменений в стороннем iframe, которые у вас есть, - это если сторонний код поддерживает отправку сообщения в окружающий фрейм. Есть несколько способов сделать это, но они должны поддержать это. Если они этого не сделают, вы ничего не можете сделать. Если бы это был я, я бы проверил следующее:

1. Прочитайте стороннюю документацию, посмотрите, поддерживают ли они какие-либо сообщения или события js.
2. Посмотрите, предлагает ли сторонняя система другой способ, помимо iframe, реализовать ту же самую способность.

теги сценария?

Что касается сообщения, которое вы можете добавить, проверяли ли вы, можете ли вы добавить какие-либо теги HTML к этому сообщению? Это маловероятно, но если это так, вы можете добавить свой собственный тег сценария для связи с вашим фреймом, чтобы запустить собственную функцию (например, `window.iframeSuccess`) и сообщить вам, что событие произошло...

Следующий код будет работать, опять же, только если обе стороны находятся в одном домене (внешний фрейм и фрейм). В противном случае он будет заблокирован политикой того же происхождения.

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

Вместо этого вы могли бы реализовать следующее, которое было разработано именно для связи между кадрами. Это более современное решение, поэтому оно не будет работать в старых браузерах. Чтобы узнать, что его поддерживает, вы можете прочитать здесь:

Какие браузеры теперь поддерживают вызов window.postMessage?

Пример того, как использовать window.postMessage - сначала код во внешнем фрейме:

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);
}

Затем код помещается в iframe:

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

Для получения дополнительной информации вы можете прочитать здесь:

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

тег изображения?

Если они блокируют теги сценария, возможно, они могут разрешить теги изображения. Если это так, у вас есть более хитрая опция, которая заключается в том, чтобы встроить изображение, которое отправляется обратно на серверный скрипт, который затем может пометить событие в базе данных...

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

однако, чтобы ваш javascript мог заметить это событие, вам понадобится какая-то система опроса, которая постоянно проверяет вашу серверную базу данных из вашего js (через ajax или websockets) - и вам нужно будет иметь возможность однозначно идентифицировать пользователя на обоих сторон (ваших и сторонних) с каким-то идентификатором. Таким образом, этот метод действительно возможен только в том случае, если сторонняя система позволяет вам вставить идентификатор пользователя (или некоторую другую уникальную информацию пользователя) в сообщение, отображаемое пользователю. Это в значительной степени последний запасной вариант, если у вас нет другого выбора.