Комментарий: window.postmessage позволяет нескольким окнам/кадрам передавать данные и информацию по доменам. Вот описание того, как работает window.postmessage и как использовать его в Firefox, IE8+, Opera, Safari и Chrome
Оригинальный адрес: html5's window.postmessage APIПример онлайн: используя html5 от window.postmessage (пожалуйста, откройте консоль для просмотра журнала)
Я написал плагин Mootools Postmessager, чтобы инкапсулировать window.postmessage, вы можете нажать здесь, чтобы загрузить его!
Не многие люди знают об API интерфейса HTML5. window.postmessage позволяет передавать данные и информацию через домены между несколькими окнами/кадрами. По сути, Window.postmessage играет роль перекрестных запросов Ajax, и, конечно, для сотрудничества для сотрудничества для сотрудничества. Далее мы представим, как работает window.postmessage и как использовать его в Firefox, IE8+, Opera, Safari и Chrome.
1. Отправка сообщения
Первым шагом всего процесса является настройка источника сообщения. Через этот источник сообщения мы можем отправить данные на уровне окна (сообщения) в недавно открытое окно (или iframe). В следующем примере частота отправки сообщений в новое окно - один раз каждые 6 секунд, а прослушивание событий устанавливается для обработки информации о ответе, возвращаемой целевым окном.
Функция трассировки (сообщение) {
var infos = array.prototype.slice.call (аргументы, 0) .join ("");
if ("Консоль" в окне) {
console.log (Infos);
} еще {
бдительность (Infos);
}
};
// Создать всплывающее окно
var domain = 'http://sccriptandstyle.com';
var mypopup = window.open (domain + '/windowpostmessagelistener.html','mywindow');
// регулярно отправлять сообщения
setInterval (function () {
var message = 'текущее время:' + (new Date (). getTime ());
Trace ('источник данных. Сообщение отправлено:' + message);
mypopup.postmessage (сообщение, домен); // Отправлять данные данных и установить целевой URI
}, 6*1000);
функция BindEvent (Target, NoOneVentName, Handler) {
if (window.addeventListener) {
target.addeventListener (noOneVentname, Handler);
} else if (window.attachevent) {
// Функция настройки прослушивания IE является AttachEvent
target.attachevent ("on"+nooneventname, обработчик);
} еще {
Target ["on"+noOneventName] = Handler;
}
};
// Слушайте полученную информацию.
BindEvent (window, 'message', function (event) {
// получает только сообщения из определенных доменов
if (event.origin! == 'http://scctryandstyle.com') return;
Trace ('полученная информация о ответе:', event.data);
},ЛОЖЬ);
Оригинальный автор использовал метод Window.AddeventListener для привязки событий, но в соответствии с IE будет сообщена ошибка (т.е. window.attachevent). Конечно, вы можете создавать функции для завершения событий или использовать готовые библиотеки классов, такие как Mootools или jQuery/Dojo для их реализации.
В приведенном выше примере, если новое окно открывается нормально, мы можем отправить сообщение через ссылку на MyPopup объекта Window и указать URI (протокол, имя хоста, номер порта), который должен быть сопоставлен (если пользователь прыгает на другую страницу в окне ребенка, сообщение не будет отправлено).
Точно так же мы также связываем обработчик событий с получением сообщений сообщений. Вот напоминание о том, что важно проверить атрибут происхождения события сообщения, потому что он может получать сообщения, отправленные вам всеми URI, так что он не будет запутан, когда взаимодействуют несколько кадров. После проверки происхождения, как обработать это сообщение, зависит от вашего конкретного бизнеса и потребностей.
При использовании iframe, код выглядит следующим образом:
// Создать другое окно (iframe, Frame, Frameset, Top, Window и другие объекты, которые принадлежат к окну.)
var domain = 'http://sccriptandstyle.com';
var iframe = document.getElementById ('myiframe'). ContentWindow;
// Отправлять сообщения в цикле, конечно, можно использовать события или что-то в этом роде. Полем Полем
setInterval (function () {
var message = 'текущее время:' + (new Date (). getTime ());
Trace ('источник данных. Сообщение отправлено:' + message);
iframe.postmessage (сообщение, домен); // Отправлять данные данных и установить целевой URI
}, 6*1000);
Обязательно обратитесь к свойству ContentWindow объекта iframe - не только объекта iframe.
2. Приемник сообщения
Второй шаг во всем процессе - подготовить целевое окно готовым. То, что должно сделать окно «Цель», - это прослушать событие сообщения, и, конечно, оно также необходимо проверить источник происхождения события. Опять же, обработчик событий сообщений может принять сообщения, отправленные ему любым доменным именем, поэтому очень важно проверить происхождение и обрабатывать только сообщения, которые только списки доверия.
// Слушайте полученную информацию.
BindEvent (window, 'message', function (event) {
// получает только сообщения из определенных доменов
if (event.origin! == 'http://davidwalsh.name') return;
Trace ('Слушайте сообщение:', Event.data);
// ответить на сообщение
event.source.postmessage («Привет, друзья, я получил сообщение, event.origin);
},ЛОЖЬ);
Приведенный выше пример отвечает на запрашивающую сторону.
Важными атрибутами события сообщения являются:
Источник - Отправить окно сообщения/объект iframe
Происхождение - соответствует URI (протокол, домен и порт, если указано)
Данные - конкретная информация данных
Эти три объекта необходимы для системы сообщений и проверки.
Примечания об использовании window.postmessage
Как и все другие веб -технологии, опасность очевидна, если его неправильно используются (без проверки источников событий). Конечно, вам гарантируется безопасность.
window.postmessage очень похож на PHP в технологии JavaScript (ха -ха, небольшая реклама!). Window.postmessage - это крутая технология, как вы думаете?