Новый метод реализации кросс-доменных сообщений в HTML5

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

До появления HTML5, кросс-доменные сообщения имели некоторые ограничения. Например, отправка сообщений между окнами была возможна, только если оба окна используют тот же протокол, порт и хост. С введением HTML5, все эти ограничения исчезли, и теперь мы можем спокойно передавать сообщения между доменами, с помощью нового метода postMessage(). Посмотрим, как это работает.

Окно отправки

otherWindow.postMessage(message, targetOrigin, [transfer]);

‘OtherWindow’ является ссылкой на другое окно, а ‘message’ – это сообщение, которое будет отправлено на это окно. ’targetOrigin’ отсылает URL окну приема. Если у вас нет каких-то конкретных предпочтений, вы можете определить ’targetOrigin’ - как ‘*’, но это имеет некоторые последствия для безопасности. ‘Transfer’ указывать необязательно.

Окно приема

Когда otherWindow.postMessage () выполняется, а MessageEvent будет отправлено в окно приема, мы можем получить это сообщение, используя следующий код:

window.addEventListener("message",receiveMessage, false); function receiveMessage(event){ if (event.origin !== "http://mysite.ru:8383") return; // ... }

Из этого кода, мы можем получить доступ к данным происхождения этого окна. Так ‘Event.origin’ присылает URI источника сообщения, а ‘Event.data’ говорит, что сообщение было отправлено.

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