Преодоление кросс-доменности в iframe

Дочерние документы не могут самостоятельно читать данные из родительского фрейма,  если тот находится на другом домене. Возможны исключения для под-доменов одного и того же доменного имени.

Все это связано с мерами безопасности и т.п. чепухи. :). Для преодоления данных ограничений я использую обмен сообщениями между фреймами. Особенности данного подхода мы и рассмотрим в данной статье.

Допустим, у вас есть родительское окно с фреймом.

Отправка данных из фрейма в родительское окно.

Упакуйте нужные данные в объект и отправьте их window.parent.

Теперь данные нужно как то поймать в родительском окне.

Получение сообщения от фрейма в родительском окне.

Суть стоит в добавлении обработчика события ‘message’. В нем нас будет интересовать параметр event.originalEvent.data — с отправленными нам данными.

Для сокращения синтаксиса, воспользуюсь jQuery:

Как видите, пока все очень просто.

Теперь рассмотрим что делать, если нам понадобится отправить сообщение (к примеру, результат обработки данных) обратно в дочерний фрейм?

Рассылка сообщений по дочерним фреймам.

Первая проблема — мы не знаем откуда (из какого фрейма) пришло сообщение. Вторая состоит в том, что и другие под-программы вашего сайта (3d part скрипты, сервисы сбора статистики) могут отправлять сообщения, и ваш обработчик будет их также перехватывать. Это вам предстоит учесть самим.

Как решить первую проблему?

В пакет с данными можно добавить какой то идентификатор, по которому определять откуда отправлен запрос. Это один из вариантов.

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

Нужно учесть, что :

  • Некоторые сообщения могут не требовать ответа,
  • Запросы могут иметь разное назначение и т.д.

Предлагаю взглянуть на следующий прототип API обмена сообщениями.

В родительском окне размещаем скрипт такого вида:

На стороне iframe придется организовать обработку события message аналогично как и на стороне родительского окна.

А при отправке запросов надо указывать коды операции:

Написать комментарий

Мало букафф? Читайте есчо !

Анимация смены картинок с помощью jquery

Декабрь 26, 2012 г.

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

Читать

Ajax в Drupal 7

Август 31, 2015 г.

Расскажу про использование техники ajax в рамках движка Drupal. Начнем с теоретических моментов. Во-первых, чтобы получить какие то данные с веб-сайта под Drupal, нужно чтобы соответствующий адрес существовал на сайте. Во-вторых, нам не хотелось бы ...

Читать

 

Комментарии к «Преодоление кросс-доменности в iframe»

Понравилась статья? Есть вопросы? - пишите в комментариях.



Комментарий: