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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Перемешиваем слайды перед началом работы в swiper.js

Март 27, 2021 г.

Когда слайдов много, то пользователи постоянно видят одни и те же слайды, что загружены первыми. Потому хотелось бы их переставлять в случайном порядке при каждой загрузке слайдера (я пользуюсь плагином swiper.js). Т.к. слайдер не даёт такой опции, ...

Читать

Проверка checkbox состояния checked, jQuery

Февраль 19, 2020 г.

Шаблон для проверки состояния элемента input[type='checkbox']. Код проверяет отмечен элемент или нет. [crayon-64732827548f9020573633/] Проверка выполняется с помощью метода is(), который читает в данном случае не атрибуты тега input, а именно ...

Читать

 

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

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



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