Блог веб разработки

Блог веб-разработки статьи | видеообзоры | исходный код

Broadcast Channel

Всем привет! Сегодня мы рассмотрим интересный api Broadcast Channel с помощью которого можно осуществлять передачу сообщений между вкладками и окнами браузера, а также фреймами. Итак, поехали!

Первое что вы должны понимать, передача сообщений с помощью данного api осуществляется только в контексте одного домена. То есть мы не сможем обмениваться сообщениями между ресурсами имеющими разные домены. Запомните это!

Для того чтобы начать работать с данным api необходимо создать объект BroadcastChannel.

var cannel = new BroadcastChannel('channel1');

Здесь мы в переменную cannel поместили объект класса BroadcastChannel(). В самом классе мы указали название канала который будет использоваться для обмена сообщениями.

Дальше все довольно просто. Между страницами где будет создан объект BroadcastChannel и указан точно такой же канал можно будет обмениваться сообщениями.

К примеру:

https://webfanat.com

var cannel = new BroadcastChannel('channel1');
cannel.postMessage('Привет другому окну');

https://wenfamat.com/login

var cannel = new BroadcastChannel('channel1');
cannel.onmessage = function (ev) { console.log(ev); }

Здесь мы открываем две вкладки в браузере со страницами https://webfanat.com и https://wenfamat.com/login. Со страницы https://webfanat.com через метод postMessage() мы отправляем сообщение. На странице https://wenfamat.com/login принимаем это сообщение через событие onmessage. В результате во вкладке со страницей https://wenfamat.com/login у нас вывелось сообщение в консоль которое мы отправили из вкладки со страницей https://wenfamat.com.

То же самое мы можем сделать если страницы сайта открыты в разных окнах браузера или содержаться во фреймах.

Если на одной из страниц мы хотим прекратить обмен сообщениями. Достаточно закрыть канал с помощью метода close().

cannel.close()

В итоге данная страница прекратить прием и отправку сообщений через api Broadcast Channel.

Данный api поддерживается всеми современными браузерами за исключением safari, IE и т.п.

В общем на этом данная статья подошла к концу. Если у вас появились вопросы оставляйте их в комментариях или группе

вк.

Ну а я с вами прощаюсь. Желаю вам успехов и удачи! Пока.

Оцените статью

Еще статьи

расширения js

файловая система PHP

Таймеры JavaScript

Геолокация HTML

кодирование JavaScript

регулярные выражения javaScript

pattern html

details html

Как я пришел к этому.

Комментарии

Проверочный код

В данном разделе пока нет комментариев!

История

    ПОДПИСКА

    • Подпишись и получай информацию о выходе новых статей на почту! Просто введите свою почту, нажмите кнопку подписаться. На почту должно будет прийти сообщение с потверждением подписки. Если сообщение не пришло проверьте раздел спам или попробуйте другую почту. Также по всем техническим проблемам вы можете написать в поддержку

    НОВОСТИ

    • Всем привет! Запустил новый сервис для поиска и бесплатного скачивания, прослушивания аудиокниг. Здесь вы можете найти множество литературы и прослушать ее. Вскоре возобновлю написание статей.