Связь Между Окнами Одного И Того Же Браузера С Помощью Файлов Cookie

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

Метод поможет нам отреагировать на событие, произошедшее в другом окне.

Например, как это делает ВК - когда у нас в одной вкладке играет музыка, а в другой мы открываем видео или включаем другой трек.

Решение кроссбраузерное, к сожалению сейчас нет возможности протестировать его на телефоне/планшете, но думаю должно сработать.

Итак, решение простое и довольно элегантное – через куки.

Я использовал jQuery и плагин jquery.cookie, но все это можно реализовать с помощью нативных js-инструментов без обертки.

Итак, у нас есть «прослушиватель» изменений файлов cookie:

   

 var lastState = 0;
 
 $(document).

ready(function()
 {
     cookieTimer();
 });
 
 function cookieTimer()
 {
     var t = $.

cookie('state');
     if(t != lastState)
     {
         lastState = t;
         $('#stateLog').

append('<div>New state: ' + t + '</div>');
     }
     window.setTimeout(cookieTimer, 500);
 }
 

   

Мы также записываем текущее состояние в переменную LastState. Вторым скриптом мы изменим данные:

<button onclick="$.

cookie('state', new Date().

getTime());">Set new state</button>

Установите текущую временную метку для файла cookie состояния.

Также мы можем что-то установить в state_ cookie, например «audio.stop», где временная метка — это текущая временная метка, которую мы устанавливаем в файле cookie состояния, чтобы другие окна знали, как реагировать на наше событие.

Демо на jsfiddle: слушатель (открыто) и установщик (откройте и нажмите на кнопку, затем посмотрите на предыдущее окно).

Демо 2 в 1 UPD: Добавлю, что это решение лучше всего использовать для устройств, которые ничего не знают о localStorage, чтобы не было разногласий и недоразумений среди читателей.

Теги: #JavaScript #cookie #обмен данными #JavaScript

• Хостинг Peachtree Предоставляет Лучшие Бухгалтерские Услуги

  19 Oct, 24

• Три Дня До Марса?

  19 Oct, 24

• Российская Компания Wayray Представила Голографическую Автомобильную Навигационную Систему

  19 Oct, 24

• Sapesfaction

  19 Oct, 24

• Рентген Для Неразборных Аппаратов

  19 Oct, 24

• Больше, Чем Zoom: Мессенджер, Видеоконференции И Транскрипт В Одном Решении Для Видеоконференций Iva Mcu

  19 Oct, 24

• Аддитивные Технологии В России Сегодня. Когда Мы Сможем Печатать Человеческие Органы?

  19 Oct, 24

• Кот Взломал Парольную Защиту Ibook

  19 Oct, 24

• Mysql Profiler: Простой И Удобный Инструмент Профилирования Запросов.

  19 Oct, 24

• Более 60 Дополнений Для Gmail

  19 Oct, 24