7

Всем привет.

Задача: при открытии пользователем сайта во второй вкладке браузера, в первой вкладке должно появиться сообщение о том, что открыта новая вкладка.

Есть ли возможность реализовать этот функционал с максимальной кроссбраузерностью?

13
  • 1
    Как вариант - при открытии страницы делать отметку в cookie или localStorage, а при закрытии страницы очищать его. + проверка этой отметки с определенным интервалом
    – Cheg
    31 июл 2017 в 14:03
  • 1
    Если что, любой возможный способ реализации ограничения пользователь сможет обойти
    – andreymal
    31 июл 2017 в 14:06
  • 1
    А вариант того, что человек может открыть в разных браузерах (как на одном, так и на разных устройствах) - не рассматриваете? 31 июл 2017 в 14:21
  • @АлексейШиманский "Есть ли возможность реализовать этот функционал с максимальной кроссбраузерностью?" 31 июл 2017 в 14:26
  • А зачем это нужно? Не костылите ли? 31 июл 2017 в 14:28

2 ответа 2

4

ниже небольшая реализация. alert будет вызываться при каждом открытии нового табика.

var currentTabId = parseInt(Math.random() * 1000);
localStorage.setItem('currentTabId', currentTabId);

setInterval(function () {
    var newTabId = localStorage.getItem('currentTabId');
    if (currentTabId != newTabId) {
        alert('New tab');
        currentTabId = newTabId;
    }
}, 1000);

1
  • Сейчас работаю над реализацией без setInterval, но направление правильное) 31 июл 2017 в 15:41
3

Всем спасибо за наводки и примеры. Вот окончательное решение:

    window.session = revoke(5);
    localStorage.setItem("session", window.session);
    var onStorage = function (e) {
        if (e.key === 'session' && e.newValue !== window.session)
            localStorage.setItem("multitab", window.session);
        if (e.key === "multitab" && e.newValue && e.newValue !== window.session) {
            window.removeEventListener("storage", onStorage);
            localStorage.setItem("session", localStorage.getItem("multitab"));
            localStorage.removeItem("multitab");
            alert("Новая вкладка");
        }
    };
    window.addEventListener('storage', onStorage);

P.S. revoke(5) -- функция, которая генерирует ключ, с длиной 5.

0

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.