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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Делаем эффект параллакса для заднего фона на сайте

Октябрь 19, 2015 г.

Очень простая мулька, но выглядит при соответствующем фоне потрясающе. Сделаем так, чтобы при скроллинге страницы, фон двигался вдвое медленнее, создавая что то вроде эффекта параллакса. Этот кусочек скрипта привязывает нас к событию onscroll окна. ...

Читать

Работа с html select в режиме multiple, отличия от обычного режима

Июнь 9, 2017 г.

HTML select с флагом multiple позволяет сделать выбор нескольких значений. В этой статье мы рассмотрим как правильно обработать данные, используя javascript ...

Читать

 

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

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



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