Есть несколько новых функций HTML5, которые вошли в последние браузеры, которые позволяют делиться состоянием между вкладками, окнами браузера, одинаковыми окнами доменов и т. Д. Так что, вероятно, стало немного легче написать веб-приложение, которое хранит много информации о состоянии. клиент, а также разумно управляет состоянием между вкладками и / или окнами.
В настоящее время есть библиотеки, такие как Backbone.js, которые могут помочь управлять состоянием на одной вкладке или в одном окне. Есть ли еще что-нибудь, что помогает с несколькими вкладками (или окнами) управлять глобальным состоянием, определенным состоянием вкладок и событиями перекрестных вкладок, не полагаясь на сервер для их синхронизации?
HTTP is great (and beutiful) because it is stateless. С тех пор, как я присоединился к индустрии, я нахожусь в поисках этой красоты, но не могу ее найти. Все говорят только о сохранении состояний, которые вы видите!Ответы:
Краткий ответ:
Вы не можете действительно передавать информацию о состоянии из одной вкладки в другую ...
Длинный ответ:
Вы не можете действительно передавать информацию о состоянии из одной вкладки в другую, так как это будет очень серьезным нарушением песочницы и безопасности.
Однако вы можете косвенно передавать состояние между двумя вкладками с помощью:
Другой вариант - просто обмениваться сообщениями через куки, чтобы передавать информацию между двумя вкладками, но это, скорее всего, вызовет проблемы, будет зависеть от браузера и потребует перезагрузки страницы (и, честно говоря, я никогда не пробовал это и просто думал об этом, но другие сделали это ) .
Таким образом, поскольку расширения браузера, очевидно, являются довольно ограничивающим путем, вы должны пойти по пути взаимодействия клиент-сервер и разработать систему, позволяющую клиентам публиковать события на сервере, который затем повторно отправляет их (или любой другой вид трансляции). другим клиентам через протокол связи по вашему выбору.
Обновление 1: как кто-то упомянул в комментарии перед его удалением (не может дать оценку, поскольку он не отображается в папке «Входящие», извините)
HTML5 представляет
window.postMessageAPI.Рабочий пример см. В блоге Джона Ресига « Перекрестные сообщения» . И что очень интересно, если вы посмотрите на комментарии к этому посту, вы заметите, что кто-то по имени Malte упоминает библиотеку, которую они написали для использования
window.postMessageв современных браузерах, или версию на основе cookie в старых браузерах.Прочитайте их для более подробной информации и примеров:
window.postMessageстраницы,window.postMessagewindow.postMessageдополнительные ссылки.Обновление 2:
Помните, что начиная с 2012-03-04, спецификация HTML5 все еще является черновиком, поэтому некоторые функции могут быть удалены . Так что используйте с осторожностью ...
источник
Недавно я обнаружил Интерком , который использует локальное хранилище для реализации широковещательного обмена сообщениями между окнами. Локальное хранилище запускает событие (
onstorage) при изменении данных, поэтому опрос не требуется. Интерком позволяет всем страницам домена общаться независимо от того, как они были открыты.источник
Если ваши окна (страницы) принадлежат одному домену (источнику),
localStorageих можно использовать для обмена данными и трансляции сообщений. Стоит учесть, что каждое окно браузера (страница) работает в отдельном потоке. Итак, если мы говорим о межоконной коммуникации, мы также говорим о многопоточности.Вы должны также рассмотреть некоторые
localStorageпроблемы с IE:Я выполнил несколько тестов для localStorage в IE8. После нескольких тысяч изменений в localStorage окна того же источника перестают получать события «хранилища». Более того, затем вы пытаетесь прочитать из одного и того же элемента localStorage, значения могут быть разными в разных окнах. Итак, я бы сказал, что IE8 не поддерживает localStorage
IE9 и IE10 вызывают обработчик событий 'storage', даже если localStorage изменяется из этого окна ( это противоречит спецификации ).
Есть также известные проблемы с IE11 .
Недавно я опубликовал библиотеку межоконных коммуникаций (все функции описаны в файле readme). Он обеспечивает потокобезопасный обмен данными, трансляцию событий. Это также решает некоторые проблемы IE (IE8 определенно не поддерживается, ошибка IE11 с iframe внутри другого родительского источника может быть решена только исправлением IE - ожиданием обновления IE11).
источник