HTMLJavaScript

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

Здесь я бы хотел затронуть тему применения 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, "*");
}

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

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

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

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

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