Обнаружить присутствие других вкладок / окон того же домена

Question

Если у меня есть две (или более) вкладки, открытые в одном домене, есть ли простой способ определить присутствие другой (чтобы контролировать, какие вычисления я делаю)?Я понимаю, что есть функция window.open (), но я не открываю одно окно из другого.Вместо этого представьте, что пользователь заходит с двумя вкладками на mydomain.com.

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

Answer 1

Установка счетчика в localStorage (увеличение счетчика при открытии новой вкладки) и в зависимости от onbeforeunload для уменьшения счетчика при закрытии вкладки не является надежным решением, потому что если вы принудительно закроете браузер, прослушиватель onbeforeunload не будет выполнено и, следовательно, счетчик не будет уменьшен.

Допустим, если у вас есть 1 открытая вкладка и ваш счетчик localStorage "tabs_opened" равен 1. По какой-то причине вам нужно принудительно выйти из браузера. При повторном открытии браузера и повторном посещении того же веб-сайта счетчик «tabs_opened» теперь станет равным 2, поскольку счетчик «tabs_opened» не был уменьшен.

Мне жаль, что я сказал, что это не совсем ответ (но я не могу добавить комментарий, потому что у меня недостаточно репутации, чтобы добавить комментарий). Я просто очень хочу указать на этот крайний случай.

Answer 2

Это интересная проблема.

Мы можем попробовать эти API: postMessage, sessionStorage, localStorage, webRtc

BroadcastChannel очень хорошо подходит:

BroadcastChannel позволяет скрипты из того же происхождения, но другие просмотр контекстов (окна, рабочие) для отправки друг другу сообщений.

Интерфейс BroadcastChannel представляет собой именованный канал, который любой на контекст просмотра данного источника можно подписаться. Это позволяет связь между разными документами (в разных окнах, вкладках, кадры или фреймы) того же происхождения. Сообщения транслируются через событие сообщения сработало во всех объектах BroadcastChannel, прослушивающих канал.

Он отличается от API postMessage тем, что дочерние окна не должны быть объявлены на родительской странице. Так больше нет ни родителей, ни детей.

Пример отправки:

new BroadcastChannel('myapp').postMessage('Hello?');

Пример получения:

new BroadcastChannel('myapp').addEventListener('message', function(e){
  console.log(e.data) 
})

Таким образом, мы можем считать вкладки или даже сообщать текущие активные состояния другим вкладкам и т. Д.

- ( апрель 2019 ) Отзыв об использовании с этого поста. API BroadcastChannel довольно прост, но позволяет переосмыслить архитектуры .

Это позволяет импортировать модули, чтобы общаться друг с другом, это упрощает составление сценариев.

Я не испытываю необходимости в составленных веб-скриптах для создания сложных вещей. Мы можем обмениваться объектами, закодированными в json, по каналам, при необходимости вызывать «сервис», разделять логику, шаблоны, фабрики, события, сервисы.

Это место для использования памяти и производительности. Мы можем создать много каналов, параллельно передавая большой поток данных, это никак не повлияет на оперативную память / процессор и скорость отклика интерфейса.

Меньше переменных, меньше логики, данные, передаваемые напрямую. Стиль кодирования очень похож на веб-сокеты, это просто локальный сокет.

Broadcast_Channel_API

https://caniuse.com/#feat=broadcastchannel

Answer 3

Используйте хранилище сеансов html5, вы можете делиться данными между окнами, поэтому вы можете увеличивать переменную хранилища сеансов каждый раз, когда открывается окно данного домена.