Статья будет очень короткой, но описывает неплохой способ обмена данными между окнами в одном браузере.
Способ поможет нам среагировать на событие, которое произошло в другом окне. Например, как это делает VK — когда в одной вкладке у нас играет музыка, а в другой мы открываем видео или включаем другой трек.
Решение кросс-браузерное, сейчас к сожалению нет возможности проверить его на телефоне/планшете, но думаю, что всё должно работать.
Итак, решение простое и достаточно изящное — через cookie.
Я использовал jQuery и плагин jquery.cookie, но это всё можно реализовать и нативными средствами самого js без обёртки.
Итак, у нас есть «слушалка» изменений cookie:
Мы раз в пол секунды проверяем данные в куке «state» и, если они изменились — реагируем на событие, в данном случае мы просто выводим данные на экран. А также, записываем текущее состояние в переменную lastState.
Вторым скриптом мы будем менять данные:
Устанавливаем текущий timestamp в куку state.
Также, мы можем установить что-либо в куку state_<timestamp>, например «audio.stop», где timestamp — текущий timestamp, который мы установили в куку state, чтобы остальные окна знали как реагировать на наше событие.
Демо на jsfiddle: слушалка (открываем) и устанавливалка (открываем и нажимаем на кнопку, затем смотрим в предыдущее окно).
Демо 2 в 1
UPD: добавлю, что данное решение лучше использовать для устройств, которые ничего не знают о localStorage, чтобы не было разногласий и недопонимания среди читателей.
Способ поможет нам среагировать на событие, которое произошло в другом окне. Например, как это делает VK — когда в одной вкладке у нас играет музыка, а в другой мы открываем видео или включаем другой трек.
Решение кросс-браузерное, сейчас к сожалению нет возможности проверить его на телефоне/планшете, но думаю, что всё должно работать.
Итак, решение простое и достаточно изящное — через 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);
}
Мы раз в пол секунды проверяем данные в куке «state» и, если они изменились — реагируем на событие, в данном случае мы просто выводим данные на экран. А также, записываем текущее состояние в переменную lastState.
Вторым скриптом мы будем менять данные:
<button onclick="$.cookie('state', new Date().getTime());">Set new state</button>
Устанавливаем текущий timestamp в куку state.
Также, мы можем установить что-либо в куку state_<timestamp>, например «audio.stop», где timestamp — текущий timestamp, который мы установили в куку state, чтобы остальные окна знали как реагировать на наше событие.
Демо на jsfiddle: слушалка (открываем) и устанавливалка (открываем и нажимаем на кнопку, затем смотрим в предыдущее окно).
Демо 2 в 1
UPD: добавлю, что данное решение лучше использовать для устройств, которые ничего не знают о localStorage, чтобы не было разногласий и недопонимания среди читателей.
