HTML5 Postmessage Решает решения по перекрестному дому и перекрестному передаче сообщений

Обычно при выполнении веб -разработки существует несколько проблем, которые часто сталкиваются в дополнение к клиентам и передаче сервера.

1. Передача данных страниц и новых окон открылась

2. Сообщения между несколькими окнами

3. Пейдж и вложенная передача сообщения iframe

4. Передача данных Cross -Domain в трех вышеуказанных выпусках

postmessage ()

Эти проблемы имеют некоторые решения, но API сообщения, представленный HTML5, может быть более удобным, эффективным и надежно решенным. Метод postmessage () позволяет сценариям из разных источников использовать асинхронные методы для ограниченной связи, которые могут реализовать перекрестные текстовые файлы, многопрофильные сообщения и сообщения.

Метод Postmessage (Data, Origin) принимает два параметра

1. Данные: данные, которые должны быть переданы, в спецификации HTML5 упоминается, что параметр может быть любой основной тип или воспроизводимый объект JavaScript, но не все браузеры сделали это. Необходимо использовать метод json.stringify () для сериализации параметра объекта при прохождении параметров.

2.рии: Строка Параметры, указывают источник целевого окна, протокол+хост+номер порта [+URL], будет игнорироваться, поэтому вы можете написать его. Сделайте только сообщение в указанное окно. к/.

http://test.com/index.html

 <div Style = ширина: 200px; src = http://lslib.com/lslib.html> </iframe> </div>

Мы можем передать сообщение на страницу Cross -http: //lslib.html на Cross -domain, если http://test.com/index.html передает сообщения

 Window.onload = function () {window.frames [0] .postmessage ('getColor', 'http://lslib.com');}

Приемное сообщение

На странице выше Test.com отправила сообщение на lslib.com, так как получать сообщения на странице lslib.com, и отслеживать событие сообщения о событии сообщения Window.

http://lslib.com/lslib.html

 Window.addeventlistener ('message', function (e) {if (e.source! = Window.parent) return; var color = container.style.backgroundcolor; window.parent. Postmessage (color, '*');}, ЛОЖЬ;

Таким образом, мы можем получить сообщение, передаваемое любым окном.

Есть несколько важных атрибутов

1. Данные: Как следует из названия, это сообщение, которое передается на

2. исход: окно -объект для отправки сообщений

3.ригин: источник отправки окна сообщения (протокол+хост+номер порта)

Таким образом, вы можете получить Cross -Domain Message.

Простая демонстрация

В этом примере DIV слева будет изменяться в соответствии с изменением цвета DIV справа справа

 <! <div id = color> цвет кадра </div> </div> <div> <iframe id = kild src = http://lslib.com/lslib.html> </div> </div> <script type = Text/javascript> window.onload = function () {window.frames [0] .postmessage ('getColor', 'http://lslib.com');} window.addd eventlistener ('message', function (e) {var color = e.data;

 <! = Контейнер OnClick = ChangeColor (); ); ;}, false); , 0) ';} else {color =' rgb (204,102,0) ';} контейнер.style.backgroundcolor = color; com/lslib.html

Когда страница загружена в примере, домашняя страница отправляет запрос «getColor» на iframe (параметры не являются практичными)

 Window.onload = function () {window.frames [0] .postmessage ('getColor', 'http://lslib.com');}

Iframe получает сообщение и отправляет текущий цвет на главную страницу

 Window.addeventlistener ('message', function (e) {if (e.source! = Window.parent) return; var color = container.style.backgroundcolor; window.parent. Postmessage (color, '*');}, ЛОЖЬ;

Получить сообщения на домашней странице, измените свой собственный цвет div

 Window.addeventListener ('message', function (e) {var color = e.data; document.getElementbyId ('color'). Style.backgroundcolor = color;);

При нажатии на Iframe запускает метод изменения цвета, отправьте последний цвет на главную страницу

 Function ChangeColor () {var color = container.style.backgroundcolor; Rgb (204,102,0) ';} container.style.backgroundcolor = color;

Домашняя страница по -прежнему использует программу, которая только что слушала событие сообщения, чтобы справиться с собственным обесцвечиванием

 Window.addeventListener ('message', function (e) {var color = e.data; document.getElementbyId ('color'). Style.backgroundcolor = color;);

наконец

Простое использование решает большую проблему. Совместимость с так называемым браузером почти стала проблемой, которую начал. Сущность Сущность Однако хорошие новости похожи на LocalStorage. также определил, поддерживает ли он addeventListener.

Приведенное выше содержимое этой статьи.