Публикация сообщения

Публикация сообщения.

При построении примера для данного API необходимо учесть следующее: процесс обмена данными происходит между разными окнами (фреймами, вкладками или другими API), таким образом, мы должны создать документы и коды для каждой стороны. В примере будем использовать шаблон с фреймом iframe и соответствующими кодами JavaScript для каждого участника. Начнем с основного HTML-документа (листинг 13.12).

Листинг 13.12. Основной документ с фреймом iframe

<!DOCTYPE html>

<html lang="ru">

<head>

<title>Обмен сообщениями между документами</title>

<link rel="stylesheet" href="messaging. css">

<script src="messaging. js"></script>

</head>

<body>

<section id="formbox"> form name="form">

<p>Baiue имя: <input type="text" name="name" id="name" required></p>

<p><input type="button" name="button" id="button" value="Отправить"></p>

</form>

</section>

<section id="databox">

<iframe id="iframe" src="iframe. html" width="500" height="350"></iframe>

</section>

</body>

</html>

Как видите, здесь присутствуют два элемента <section>, как и в предыдущих шаблонах, однако в элемент databox теперь входит элемент <iframe>, в котором загружается файл iframe. html. К этому мы вернемся позже. А пока что добавим к структуре несколько стилей (листинг 13.13).

Листинг 13.13. Стилизация полей (messaging. css)

#formbox{ float: left; padding: 20px; border: 1px solid #999999;

}

#databox{ float: left; width: 500px; margin-left: 20px; padding: 20px; border: 1px solid #999999;

}

Код JavaScript для основного документа должен принимать значение, введенное пользователем в поле name формы, и отправлять его документу внутри iframe, применяя для этого метод postMessage().

Листинг 13.14. Публикация сообщения (messaging. js)

Function initiate(){

Var button=document. getElementById(‘button’); button. addEventListener(‘click’, send, false);

}

Function send(){

Var name=document. getElementById(‘name’).value; var iframe=document. getElementById(‘iframe’);

Iframe. contentWindow. postMessage(name, ‘*’);

}

Window. addEventListener(‘load’, initiate, false);

В коде из листинга 13.14 сообщение формируется на основе значения в поле ввода name. В качестве цели указан символ *, для того чтобы сообщение отправлялось всем документам, выполняющимся внутри фрейма iframe (независимо от их источника).

Когда пользователь щелкает на кнопке Отправить, происходит вызов функции send() и значение из поля ввода отправляется содержимому iframe. Теперь iframe должен принять сообщение и обработать его. Мы создадим для этого фрейма небольшой HTML-документ, в котором полученная информация будет выводиться на экран (листинг 13.15).

Листинг 13.15. Шаблон для фрейма (iframe. html)

<!DOCTYPE html>

<html lang="ru">

<head>

<title>OKHC> iframe</title>

<script src="iframe. js"></script>

</head>

<body>

<section>

<div><b>Сccбщение из главного cкна:</b></div>

<div id="databox"></div>

</section>

</body>

</html>

В этом шаблоне есть собственный элемент databox, в котором мы можем отображать сообщение, а для обработки сообщения используется отдельный файл с кодом JavaScript.

Листинг 13.16. Обработка сообщений в целевом документе (iframe. js)

Function initiate(){

Window. addEventListener(‘message’, receiver, false);

}

Function receiver(e){

Var databox=document. getElementById(‘databox’); databox. innerHTML=’сccбщение от: ‘+e. origin+’<br>’; databox. innerHTML+=’сccбщение: ‘+e. data;

}

Window. addEventListener(‘load’, initiate, false);

Как говорилось ранее, в данном API для настройки прослушивания сообщений предусмотрены событие message и несколько свойств. В коде из листинга 13.16 добавляется прослушиватель события message, который при срабатывании события вызывает функцию receiver(). Функция выводит содержимое сообщения и сведения о документе, отправившем сообщение, проверяя для этого значения свойств data и origin.

Не забывайте, что этот код принадлежит HTML-документу для фрейма iframe, а не главному документу из листинга 13.12. Это два разных документа, у каждого свои среда, контекст и сценарии: один из них представляет собой главное окно браузера, а второй находится внутри iframe.

Для тестирования описанного примера вам понадобится создать и загрузить на сервер пять файлов. Создайте HTML-файл с кодом из листинга 13.12 — это главный документ. Для этого документа необходимо также добавить файл messaging. css со стилями из листинга 13.13 и файл messaging. js с JavaScript-кодом из листинга 13.14. Шаблон из листинга 13.12 включает в себя элемент <iframe>, источником которого является файл iframe. html. Создайте этот файл и поместите в него код из листинга 13.15, также создайте соответствующий файл iframe. js с кодом из листинга 13.16. Загрузите все файлы на свой сервер, откройте первый HTML-документ в браузере и с помощью формы отправьте свое имя во фрейм iframe.

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

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