Изучите основы общения "один ко многим" с помощью BroadcastChannel API.
ВChannel Messaging API- отличный способ отправлять сообщения один-к-одному из окна в iframe, из окна в веб-воркер и т. д.
API BroadcastChannel можно использовать для отправки сообщений «один ко многим», одновременно обмениваясь данными с несколькими объектами.
Вы начинаете с инициализацииBroadcastChannel
объект:
const channel = new BroadcastChannel('thechannel')
Чтобы отправить сообщение по каналу, вы используетеpostMessage()
метод:
channel.postMessage('Hey!')
Сообщение может иметь любое из этих поддерживаемых значений:
- Все примитивные типы, кроме символов
- Массивы
- Объектные литералы
- Нить,Дата,RegExpобъекты
- Blob,
File
,FileList
объекты ArrayBuffer
,ArrayBufferView
объекты- FormDataобъекты
- Объекты ImageData
- картаиНаборобъекты
Чтобы получать сообщения с канала, послушайтеmessage
мероприятие:
channel.onmessage = (event) => {
console.log('Received', event.data)
}
Это событие запускается для всех слушателей, кроме того, который отправляет сообщение.
Вы можете закрыть канал, используя:
channel.close()
Скачать мою бесплатнуюРуководство для начинающих по JavaScript
Больше руководств по браузеру:
- Некоторые полезные приемы, доступные в HTML5
- Как я заставил веб-сайт на CMS работать в автономном режиме
- Полное руководство по прогрессивным веб-приложениям
- API-интерфейс Fetch
- Руководство по Push API
- API обмена сообщениями канала
- Учебник для сервис-воркеров
- Руководство по Cache API
- Руководство по API уведомлений
- Погрузитесь в IndexedDB
- API селекторов: querySelector и querySelectorAll
- Эффективно загружайте JavaScript с помощью defer и async
- Объектная модель документа (DOM)
- API веб-хранилища: локальное хранилище и хранилище сеансов
- Узнайте, как работают HTTP-файлы cookie
- API истории
- Формат изображения WebP
- XMLHttpRequest (XHR)
- Подробное руководство по SVG
- Что такое URL-адреса данных
- Дорожная карта для изучения веб-платформы
- CORS, совместное использование ресурсов между источниками
- Веб-воркеры
- Руководство по requestAnimationFrame ()
- Что такое Doctype
- Работа с консолью DevTools и консольным API
- API синтеза речи
- Как дождаться события готовности DOM в простом JavaScript
- Как добавить класс к элементу DOM
- Как перебрать элементы DOM из querySelectorAll
- Как удалить класс из элемента DOM
- Как проверить, есть ли у элемента DOM класс
- Как изменить значение узла DOM
- Как добавить событие щелчка в список элементов DOM, возвращаемых из querySelectorAll
- WebRTC, веб-API реального времени
- Как получить позицию прокрутки элемента в JavaScript
- Как заменить элемент DOM
- Как принимать только изображения в поле входного файла
- Зачем использовать предварительную версию браузера?
- Объект Blob
- Файловый объект
- Объект FileReader
- Объект FileList
- ArrayBuffer
- ArrayBufferView
- Объект URL
- Типизированные массивы
- Объект DataView
- API BroadcastChannel
- API Streams
- Объект FormData
- Объект навигатора
- Как использовать API геолокации
- Как использовать getUserMedia ()
- Как использовать API перетаскивания
- Как работать с прокруткой на веб-страницах
- Обработка форм в JavaScript
- События клавиатуры
- События мыши
- Сенсорные события
- Как удалить всех дочерних элементов из элемента DOM
- Как создать атрибут HTML с помощью ванильного Javascript
- Как проверить, установлен ли флажок, используя JavaScript?
- Как скопировать в буфер обмена с помощью JavaScript
- Как отключить кнопку с помощью JavaScript
- Как сделать страницу редактируемой в браузере
- Как получить значения строки запроса в JavaScript с помощью URLSearchParams
- Как сразу удалить весь CSS со страницы
- Как использовать insertAdjacentHTML
- Safari, предупредить перед выходом
- Как добавить изображение в DOM с помощью JavaScript
- Как сбросить форму
- Как использовать Google Fonts