Здесь я бы хотел затронуть тему применения 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, "*");
}
Как видите, все достаточно просто.
Можно дорабатывать под свои нужды, но принцип будет тем же.
За сим все! Безошибочного Вам кода!
