JavaScript API: XDM и уведомления

Реклама - двигатель HTML 5

В предыдущих номерах мы уже познакомились с системой обмена сообщениями между браузером и сервером WebSockets, системой сообщений между компонентами внутри браузера WebWorkers. Но это ещё не всё. Браузер эпохи HTML 5 может и должен поддерживать возможность обмена сообщений и между веб-страницами в браузере.

Cross-document Messaging (XDM) - это и есть стандарт HTML 5, который делает возможным обмен данными между страницами, табами, фреймами в веб-обозревателе.

Эта технология интересна уже тем, что её активно продвигает "Майкрософт", начиная с браузера Internet Explorer 8. Само собой разумеется, ее поддерживают остальные популярные браузеры в своих современных версиях.

Интерес "Майкрософт" к XDM вполне закономерен: технология, в первую очередь, предназначена для работы с плавающими фреймами IFrame, позволяющих подгружать в веб-странички содержимое другой страницы. IFrame - это одна из новаций, предложенных самой "Майкрософт".

Сами же и-фреймы - одно из главных орудий труда всякого рода рекламщиков. И, соответственно, основную значимость междокументальный обмен данных XDM будет иметь для тех, кто занимается размещением всеми "любимой" рекламы на сайтах.

И по этому поводу хотелось бы сказать пару слов в качестве небольшого лирического отступления. В последнее время со стороны отдельных представителей отрасли только и слышно, как хорош HTML 5 и открытые веб-стандарты и как плох какой-нибудь Adobe Flash. И что если "флэш умрёт", то наступит чуть ли не всеобщее счастье.

Однако у всего есть и своя "тёмная" сторона, в том числе и у HTML 5. Даже если допустить, что, например, тот же Flash исчезнет, это не значит, что с веб-страниц исчезнут рекламные вставки, которые многим так не нравятся и которые обычно делают на Flash. Просто вместо флэш-банеров будут HTML5-банеры.

Причём, если от флэш-банеров довольно легко избавиться, установив, например, расширение для управления внешними плагинами, то HTML 5 в браузере уже так просто не отключишь.

Но хватит лирики, переходим к практическим вопросам. XDM - это технология, которая позволяет обмениваться текстовыми сообщениями фреймам, страницам с разных доменов внутри одного браузера. Этот способ обмена отличается большой надёжностью, увеличивая безопасность работы пользователя.

Технически на уровне JavaScript API этот обмен происходит через метод postMessage, а получение сообщения - через обработчик сообщения "onmessage". С методом postMessage мы уже сталкивались ранее в WebSockets и Web Workers. И, можно сказать, этот метод является универсальным для любого рода обмена информацией внутри браузера.

Для примера рассмотрим веб-страничку, которая подгружает в и-фрейм другую страничку и отсылает ей информационное сообщение по нажатию кнопки. Технология XDM предполагает проверку домена подгружаемой страницы, но в этом примере мы эту проверку для краткости опустим.

Код для основной страницы

<iframe src="banner.html" id="iframe">
</iframe>
<form id="form">
<input type="submit" value="Послать рекламу"/>
</form>

<script>
// Передатчик
var msg = "Читай КВ!";
var ban = document.getElementById("iframe").contentWindow;
document.getElementById("form").onsubmit = function(){
 ban.postMessage(msg, "*");
 return false;}
</script> 

Код страницы для баннера

<div id="banner">Здесь могла быть бы ваша реклама</div>

<script>
//Приёмник
function onmessage(event){
 document.getElementById("banner").innerHTML = event.data; }
window.addEventListener("message",onmessage,false);
</script> 

То есть, как видим, в новую эпоху Веба страницы и фреймы в браузере пользователя могут координироваться между собой. А это обещает, что интернет-рекламщики будут придумывать ещё более хитроумную веб-рекламу.

Уведомления

Говоря о механизмах обмена сообщениями, нельзя не сказать о возможности для веб-страницы послать сообщение самому пользователю. Такой способ передачи сообщений в браузерах нового типа будет называться "Уведомления" (Notification).

Уведомления в браузере будут похожи на системные, например, в той же Ubuntu. То есть это такие всплывающие в углу экрана окошки, в которых пользователь уведомляется о каком-либо событии.

Может возникнуть законный вопрос о необходимости в браузере таких уведомлений. Ведь, в конце концов, есть старый добрый alert() для всякого рода сообщений. Однако, во-первых, новый тип уведомлений будет выглядеть более красиво. А во-вторых, самое главное - Notification будут появляться даже в том случае, если пользователь перешёл на другую вкладку в браузере. Ведь несколько открытых табов в браузере - это сейчас обычное дело.

Надо сказать, что на данный момент практическая реализация Notification имеется только в браузерах на движке WebKit - это Google Chrome, Safari, и осуществляется она в этих браузерах через специфический интерфейс webkitNotifications:

window.webkitNotifications.createNotification
('image', 'title', 'notification');

А это значит, что с большой вероятностью этот интерфейс в окончательном варианте в других браузерах будет пересмотрен.

В качестве завершения

В этой и предыдущих статьях мы рассмотрели большую часть возможностей JavaScript, которые будут иметь браузеры в эпоху HTML 5. Это и работа со встроенными системами хранения данных, и многопоточность, и новый протокол WebSockets, и механизмы обмена данными внутри браузера. Осталось рассмотреть немного: drag'n'drop, геолокацию и новые возможности при работе с графикой.

Михаил АСТАПЧИК