Около месяца назад на работе на работе появилась интересная проблема, как я могу слушать представленную форму, которая может быть на другой вкладке? Это то, что, если бы оно было на той же вкладке, было бы намного дороже. Но я также хотел знать, могу ли я отправлять сообщения между этими двумя или более, вкладки.
Cross Tab Communication – это способность нескольких вкладок, окон, кадров IFRAMES (дополнительно известных как экземпляр) для отправки и получения «сообщений» и из других экземпляров.
Это приходит с некоторыми недостатками. Это будет работать только с доменами в однозначном происхождении.
Вы не сможете использовать это через HTTP и HTTPS. Вы не сможете использовать это на разных хостах. Вы не сможете использовать это через разные порты.
Перед тем, как попасть в некоторые демонстрации, я понял, что это может быть полезно. Иногда ваши пользователи будут иметь несколько экземпляров вашего сайта, и как мы обращаемся к своему опыту, могут быть довольно важными.
Например, блог Дэна Абрамова https://verreacted.io/ Имеет переключатель для режима Neam Mode/Light. Используя это, вы можете переключить все открытые экземпляры в предпочтительную тему без обновления.
Пример 1. – LocalStorage.
Внешняя ссылка Если вы не хотите предварительный просмотр
Как это работает, установив/изменив значение в локальном хранилище или хранилище сеанса на нагрузке приложения. Когда это произойдет, событие уволено, которое можно прослушать на любом другом случае. Это событие содержит информацию, такую как ключ, который был изменен, предыдущее значение, новое значение и многое другое. Если вы знакомы с реагированием, это похоже на то, как вы можете сравнить предыдущие реквизиты, к текущим реквизитам в методике метода жизненного цикла класса.
Недостатки примера 1
Есть некоторые недостатки для использования этого метода. Для одного вы не можете хранить объекты в локальном хранилище/хранилище сеанса, если только они не будут строки. Это означает, что вам придется разбирать любые из этих ценностей, которые не могут быть огромной сделкой, но на мой взгляд, не идеальна.
Второе обратное возвращение состоит в том, что событие не будет выпущено, если значение обновляется до того же значения. В моем примере я получаю это ограничение, чтобы установить ключ загружен на сегодняшний день. wnow ().
Пример 2 – BroadCastChannel
Внешняя ссылка Если вы не хотите предварительный просмотр
В этом примере я использую API BroadCastChannel. Для этого вы создаете новый широковещатель, используя имя (аналогично каналу IRC).
После подписки на канал вы возвращаетесь экземпляром объекта BroadCastChannel, который в этом примере мы используем две части. Вы можете отправить сообщение, используя PostMessage Функция или прикрепить функцию к OnMessage имущество.
Похоже с примером 1, а сообщения, которые вы отправляете в один экземпляр, будут получены в других случаях. Наряду с возможностью подписаться на тот же канал несколько раз.
Недостатки/Преимущества примера 2
В отличие от примера 1, вы можете опубликовать полные объекты, массивы и другие данные данных.
Тем не менее, пример 2 немного сложнее и может быть переплетением в зависимости от того, что вы пытаетесь сделать.
Поддержка для BroadCastChannel API также ограничена. По сравнению с местным хранилищем (глобально на 92%), BroadCastChannel находится на почти 76%. Chrome и Firefox оба поддерживают его, без поддержки из IE, Safari и Edge. (Край хрома поддерживает его, но все еще считается в бета-версии на этот пост).
Это можно использовать в CMS, чтобы позволить пользователю знать, что у них уже есть экземпляр, открытый при попытке чего-либо изменять или сохранить его в синхронизации по вкладкам.
Аутентификация/заблокированный контент может быть разблокирован при входе в систему так, чтобы другие окна не были вне синхронизации.
Изменение изображения профиля
Связь между Ифарами.
Изменение темы веб-сайта и синхронизация этих изменений на всех вкладках.
Я не думаю, что это будет наземное разрушение и изменить способ мы делаем наши приложения. Но я думаю, что реализовать это в некоторых функциях наших приложений может улучшить пользовательский опыт.
Если у вас есть какие-либо другие случаи использования, вы думаете, что это будет полезно, я хотел бы услышать это!
Caniuse – LocalStorage Caniuse – BroadCastChannel MDN – BroadCastChannel.
Оригинал: “https://dev.to/naismith/cross-tab-communication-with-javascript-1hc9”