Существуют ли библиотеки JavaScript с открытым исходным кодом, адресованные нескольким вкладкам браузера и состоянию клиента для новых браузеров? [закрыто]


11

Есть несколько новых функций HTML5, которые вошли в последние браузеры, которые позволяют делиться состоянием между вкладками, окнами браузера, одинаковыми окнами доменов и т. Д. Так что, вероятно, стало немного легче написать веб-приложение, которое хранит много информации о состоянии. клиент, а также разумно управляет состоянием между вкладками и / или окнами.

В настоящее время есть библиотеки, такие как Backbone.js, которые могут помочь управлять состоянием на одной вкладке или в одном окне. Есть ли еще что-нибудь, что помогает с несколькими вкладками (или окнами) управлять глобальным состоянием, определенным состоянием вкладок и событиями перекрестных вкладок, не полагаясь на сервер для их синхронизации?


2
Некоторые веб-приложения (например, Trello) обходят это, просто используя WebSockets для синхронизации всех клиентов, будь то в одном браузере или нет. Но это может быть полезно. Если бы я писал подобную библиотеку, я бы сделал тонкий слой поверх полизаполнения для SharedWorkers, поскольку SharedWorkers делает здесь многое из того, что вам нужно, но пока не поддерживается. Хак, чтобы получить эту работу, это события localStorage, которые запускаются, даже когда вкладки открывались независимо.
mahemoff

1
Мой учитель колледжа научил меня этому HTTP is great (and beutiful) because it is stateless. С тех пор, как я присоединился к индустрии, я нахожусь в поисках этой красоты, но не могу ее найти. Все говорят только о сохранении состояний, которые вы видите!
Дипан Мехта

@DipanMehta: если вы посмотрите на RFC2616, я не уверен, что вы согласитесь с вашим учителем в части «красоты» :) Хотя я бы сказал, что идея «чисто без гражданства» действительно велика, и я нахожу проблематичной что мы убиваем это ...
Хейлем

Приложение без сохранения состояния и веб-приложение не очень хорошо сочетаются. Маленькие вещи, такие как вход в состоянии переноса. Отлично, если вы просто даете достаточно маленькие файлы всем, кто их запрашивает.
PSR

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

Ответы:


3

Краткий ответ:

Вы не можете действительно передавать информацию о состоянии из одной вкладки в другую ...

Длинный ответ:

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

Однако вы можете косвенно передавать состояние между двумя вкладками с помощью:

Другой вариант - просто обмениваться сообщениями через куки, чтобы передавать информацию между двумя вкладками, но это, скорее всего, вызовет проблемы, будет зависеть от браузера и потребует перезагрузки страницы (и, честно говоря, я никогда не пробовал это и просто думал об этом, но другие сделали это ) .

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


Обновление 1: как кто-то упомянул в комментарии перед его удалением (не может дать оценку, поскольку он не отображается в папке «Входящие», извините)

HTML5 представляет window.postMessageAPI.

Рабочий пример см. В блоге Джона Ресига « Перекрестные сообщения» . И что очень интересно, если вы посмотрите на комментарии к этому посту, вы заметите, что кто-то по имени Malte упоминает библиотеку, которую они написали для использования window.postMessageв современных браузерах, или версию на основе cookie в старых браузерах.

Прочитайте их для более подробной информации и примеров:

Обновление 2:

Помните, что начиная с 2012-03-04, спецификация HTML5 все еще является черновиком, поэтому некоторые функции могут быть удалены . Так что используйте с осторожностью ...


Я, очевидно, ошибаюсь, поскольку HTML5 действительно представляет API window.postMessage.
Хайлем

Кроме того, если вы прочитаете блог Джона Ресига о кросс-оконных сообщениях и комментарии, вы заметите, что кто-то по имени Мальте упоминает [библиотеку] [3], которую они написали, чтобы использовать это в современных браузерах, или версию на основе cookie для старые браузеры, так что мои печенья были не такими уж сумасшедшими.
Хайлем

3

Недавно я обнаружил Интерком , который использует локальное хранилище для реализации широковещательного обмена сообщениями между окнами. Локальное хранилище запускает событие ( onstorage) при изменении данных, поэтому опрос не требуется. Интерком позволяет всем страницам домена общаться независимо от того, как они были открыты.


1

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

Вы должны также рассмотреть некоторые localStorageпроблемы с IE:

  • Я выполнил несколько тестов для localStorage в IE8. После нескольких тысяч изменений в localStorage окна того же источника перестают получать события «хранилища». Более того, затем вы пытаетесь прочитать из одного и того же элемента localStorage, значения могут быть разными в разных окнах. Итак, я бы сказал, что IE8 не поддерживает localStorage

  • IE9 и IE10 вызывают обработчик событий 'storage', даже если localStorage изменяется из этого окна ( это противоречит спецификации ).

  • Есть также известные проблемы с IE11 .

Недавно я опубликовал библиотеку межоконных коммуникаций (все функции описаны в файле readme). Он обеспечивает потокобезопасный обмен данными, трансляцию событий. Это также решает некоторые проблемы IE (IE8 определенно не поддерживается, ошибка IE11 с iframe внутри другого родительского источника может быть решена только исправлением IE - ожиданием обновления IE11).

Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.