Обращение из iframe к функциям родителя

Опубликовано Опубликовано в рубрике Easy Patch, HTML, JavaScript

Сегодня я бы хотел затронуть тему применения iframe на сайте. Да, эта технология уже не пользуется популярностью с тотальным порабощением сайтов AJAX-ом, но сами фреймы достаточно удобно использовать в админском интерфейсе сайта для редактирования страниц «на лету», чтобы сразу видеть полученные изменения.

Проблема тут в том, попытка вызова функции родителя (скажем, окно редактирования элемента), закончится провалом. Попробуем это исправить.
Хинт будет заключаться в том, что в месте вызова iframe мы добавляем listener, который будет «слушать» сообщения от фрейма и обрабатывать их.


Демо-пример

Демо-пример

Для начала мы назначим слушателя на стороне родителя. Issue в том, что во всех браузерах есть событие addEventListener, а в IE приходится использовать attachEvent. На эти события мы назначаем обработчиком функцию listener, которая в зависимости от полученной команды выполняет то или иное действие. В нашем случае мы просто будем добавлять рандомное число в указанный div.

function listener(event){
  var command = event.data;

  switch (command.action){
    case 'createDiv':
        $("#attacher").append("
"+ command.params.divContent +"
"); break; } } if (window.addEventListener){ window.addEventListener("message", listener,false); } else { window.attachEvent("onmessage", listener); }

Со стороны iframe мы формируем объект command, содержащий в себе команду и ее параметры, после чего вызываем функцию postMessage объекта top (это обращение к родителю iframe). В качестве параметров она принимает передаваемое сообщение и порта, по которому будет производится обращение (в нашем случае этого уточнения нет)

function sendMessage(){
	var command = {
            action : 'createDiv',
            params : {
                divId : 'div_'+Math.random() ,
                divContent: 'Число '+Math.random()
            }
        };
    
    top.postMessage(command, "*");
}

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

Можно дорабатывать под свои нужды, но принцип будет тем же.

За сим все! Безошибочного Вам кода!

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *