Я искал способ связи между несколькими вкладками или окнами в браузере (в одном домене, а не в CORS), не оставляя следов. Было несколько решений:
Первое, вероятно, наихудшее решение - вам нужно открыть окно из текущего окна, и тогда вы сможете общаться только до тех пор, пока вы держите окна открытыми. Если вы перезагрузите страницу в любом из окон, вы, скорее всего, потеряли связь.
Второй подход, использующий postMessage, возможно, обеспечивает связь между источниками, но сталкивается с той же проблемой, что и первый подход. Вам нужно поддерживать объект окна.
Третий способ, используя куки, хранить некоторые данные в браузере, что может выглядеть как отправка сообщения всем окнам в одном домене, но проблема в том, что вы никогда не узнаете, читали ли все вкладки «сообщение» или нет ранее. убираться. Вы должны установить какое-то время ожидания для периодического чтения куки. Кроме того, вы ограничены максимальной длиной куки, которая составляет 4 КБ.
Четвертое решение, использующее localStorage, казалось, преодолевает ограничения файлов cookie, и его можно даже прослушивать, используя события. Как использовать это описано в принятом ответе.
Edit 2018: принятый ответ все еще работает, но для современных браузеров существует более новое решение - использовать BroadcastChannel. См. Другой ответ для простого примера, описывающего, как легко передавать сообщение между вкладками с помощью BroadcastChannel.
источник
Ответы:
Редактировать 2018: Вы можете лучше использовать BroadcastChannel для этой цели, см. Другие ответы ниже. Но если вы все еще предпочитаете использовать localalstorage для связи между вкладками, сделайте это следующим образом:
Чтобы получать уведомления, когда вкладка отправляет сообщение на другие вкладки, вам просто нужно привязать событие «хранилище». Во всех вкладках сделайте это:
Функция
message_receive
будет вызываться каждый раз, когда вы устанавливаете любое значение localStorage на любой другой вкладке. Слушатель событий также содержит данные, недавно установленные в localStorage, поэтому вам даже не нужно анализировать сам объект localStorage. Это очень удобно, потому что вы можете сбросить значение сразу после его установки, чтобы эффективно очистить любые следы. Вот функции для обмена сообщениями:Так что теперь, когда ваши вкладки привязаны к событию onstorage и реализованы эти две функции, вы можете просто передать сообщение другим вызовам вкладок, например:
Помните, что отправка одного и того же сообщения дважды будет распространяться только один раз, поэтому, если вам нужно повторять сообщения, добавьте к ним какой-нибудь уникальный идентификатор, например
Также помните, что текущая вкладка, которая передает сообщение, фактически не получает его, только другие вкладки или окна в том же домене.
Вы можете спросить, что происходит, если пользователь загружает другую веб-страницу или закрывает свою вкладку сразу после вызова setItem () перед removeItem (). Ну, из моего собственного тестирования браузер приостанавливает разгрузку до тех пор, пока вся функция не
message_broadcast()
будет завершена. Я проверил, чтобы ввести int очень длинный цикл for (), и он все еще ждал завершения цикла перед закрытием. Если пользователь убивает вкладку только между ними, у браузера не будет достаточно времени, чтобы сохранить сообщение на диск, поэтому такой подход кажется мне безопасным способом отправки сообщений без каких-либо следов. Комментарии приветствуются.источник
Для этого существует современный API - Broadcast Channel
Это так же просто, как:
Вероятно, кроме чистоты API, главное преимущество этого API - отсутствие строковой классификации объектов.
В настоящее время поддерживается только в Chrome и Firefox, но вы можете найти polyfill, который использует localStorage.
источник
Для тех, кто ищет решение, не основанное на jQuery, это простая версия JavaScript, предложенная Томасом М:
источник
Оформить заказ AcrossTabs - Простое общение между вкладками браузера разных источников. Он использует комбинацию postMessage и sessionStorage API, чтобы сделать общение намного проще и надежнее.
Существуют разные подходы, и у каждого есть свои преимущества и недостатки. Давайте обсудим каждый:
LocalStorage
Плюсы :
Минусы :
Печенье
Плюсы:
Минусы:
Данные отправляются обратно на сервер для каждого HTTP-запроса (HTML, изображения, JavaScript, CSS и т. Д.), Что увеличивает объем трафика между клиентом и сервером.
Обычно допускается следующее:
sessionStorage
Плюсы:
localStorage
.Минусы:
localStorage
, тт работает на политику того же происхождения . Таким образом, сохраненные данные будут доступны только для одного источника.PostMessage
Плюсы:
Минусы:
targetOrigin
проверку исправности и данных для данных, передаваемых слушателю сообщений.Сочетание PostMessage + SessionStorage
Использование postMessage для связи между несколькими вкладками и одновременное использование sessionStorage во всех вновь открытых вкладках / окнах для сохранения передаваемых данных. Данные будут сохраняться до тех пор, пока вкладки / окна остаются открытыми. Таким образом, даже если вкладка / окно открывания закрывается, открытые вкладки / окна будут иметь все данные даже после обновления.
Для этого я написал библиотеку JavaScript с именем AcrossTabs, которая использует API-интерфейс postMessage для обмена данными между вкладками / окнами разных источников и sessionStorage, чтобы сохранять открытость идентификаторов открытых вкладок / окон в течение всего времени их существования.
источник
AcrossTabs
, возможно ли открыть другой веб-сайт на другой вкладке и передать данные с него на родительскую вкладку? У меня будут данные аутентификации для другого сайта.Другой метод, который люди должны рассмотреть, это использование Shared Workers. Я знаю, что это передовая концепция, но вы можете создать ретранслятор на Shared Worker, который НАМНОГО быстрее, чем localalstorage, и не требует отношения между родительским / дочерним окном, если вы находитесь в одном источнике.
Смотрите мой ответ здесь для некоторого обсуждения, которое я сделал об этом.
источник
Существует крошечный компонент с открытым исходным кодом для синхронизации / связи между вкладками / окнами одного и того же происхождения (отказ от ответственности - я один из авторов!), Основанный вокруг
localStorage
.https://github.com/jitbit/TabUtils
PS Я позволил себе порекомендовать его здесь, так как большинство компонентов «lock / mutex / sync» терпят неудачу при подключениях через веб-сокет, когда события происходят почти одновременно
источник
Я создал библиотеку sysend.js , она очень маленькая, вы можете проверить ее исходный код. Библиотека не имеет никаких внешних зависимостей.
Вы можете использовать его для связи между вкладками / окнами в одном браузере и домене. Библиотека использует BroadcastChannel, если поддерживается, или событие хранения из localStorage.
API очень прост:
когда ваш браузер поддерживает BroadcastChannel, он отправляет литеральный объект (но на самом деле он автоматически сериализуется браузером), а если нет, то он сначала сериализуется в JSON и десериализуется на другом конце.
Последние версии также имеют вспомогательный API для создания прокси для междоменной связи. (требуется один HTML-файл на целевом домене).
Вот демо .
РЕДАКТИРОВАТЬ :
Новая версия также поддерживает междоменную связь, если вы включаете специальный
proxy.html
файл в целевой домен и вызываетеproxy
функцию из исходного домена:(proxy.html это очень простой HTML-файл, в котором есть только один скрипт-тег с библиотекой).
Если вы хотите двустороннюю связь, вы должны сделать то же самое для
target.com
домена.ПРИМЕЧАНИЕ . Если вы реализуете те же функции с помощью localStorage, в IE есть проблема. Событие хранилища отправляется в то же окно, которое вызвало событие, а для других браузеров оно вызывается только для других вкладок / окон.
источник
Я создал модуль, который работает так же, как официальный Broadcastchannel, но имеет запасные варианты, основанные на localalstorage, indexeddb и unix-сокетах. Это гарантирует, что он всегда работает даже с Webworkers или NodeJS. Смотрите pubkey: BroadcastChannel
источник
Я написал статью об этом в своем блоге: http://www.ebenmonney.com/blog/how-to-implement-remember-me-functionality-using-token-based-authentication-and-localstorage-in-a- веб-приложение .
Используя созданную мной библиотеку,
storageManager
вы можете добиться этого следующим образом:Есть и другие удобные методы для обработки других сценариев, а также
источник
Это
storage
часть разработки ответа Tomas M для Chrome. Мы должны добавить слушателяЗагрузка / сохранение элемента в хранилище не запускает это событие - мы ДОЛЖНЫ вызвать его вручную
и теперь все открытые вкладки получат событие
источник