При построении примера для данного 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.
Добавить комментарий