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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Читать

Копируем в буфер обмена средствами javascript

Февраль 25, 2017 г.

Такая задача возникает не часто, но если вы заботитесь о пользователе, и помогаете ему скопировать в буфер обмена нужную информацию - то пользователь будет вам признателен. Так вы заработаете ещё один плюсик в копилку "юзабилити". Разберем ключевые ...

Читать

 

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

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



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