Existe-t-il des bibliothèques JavaScript open source traitant de plusieurs onglets de navigateur et de l'état du client pour les nouveaux navigateurs? [fermé]


11

Il y a quelques nouvelles fonctionnalités HTML5 qui ont fait leur apparition dans les navigateurs récents qui permettent de partager l'état entre les onglets, les fenêtres du navigateur, les fenêtres du même domaine, etc. client et gère également l'état intelligemment entre les onglets et / ou les fenêtres.

Il existe actuellement des bibliothèques comme Backbone.js qui peuvent aider à gérer l'état dans un seul onglet ou une seule fenêtre. Y a-t-il encore quelque chose qui aide à gérer plusieurs onglets (ou fenêtres) état global, état spécifique à un onglet et événements croisés sans compter sur le serveur pour les synchroniser tous?


2
Certaines applications Web (par exemple Trello) contournent cela en utilisant simplement WebSockets pour synchroniser tous les clients, que ce soit dans le même navigateur ou non. Mais cela pourrait être utile. Si j'écrivais une bibliothèque comme celle-ci, je ferais une fine couche sur un polyfill pour SharedWorkers, car SharedWorkers fait beaucoup de ce dont vous avez besoin ici, mais n'est pas encore bien pris en charge. Un hack pour que cela fonctionne est les événements localStorage, qui se déclenchent même lorsque les onglets ont été ouverts indépendamment.
mahemoff

1
Mon professeur d'université m'a appris cela HTTP is great (and beutiful) because it is stateless. Depuis que j'ai rejoint l'industrie, je suis à la recherche de ce beuty mais je ne le trouve pas tout à fait. Tout le monde ne parle que de garder les États que vous voyez!
Dipan Mehta

@DipanMehta: si vous regardez le RFC2616, je ne suis pas sûr que vous seriez d'accord avec votre professeur sur la partie "beauté" :) Bien que je vous dirais que l'idée "purement apatride" est vraiment géniale et je trouve problématique que nous l'
abattons

Les apatrides et les applications Web ne vont pas si bien ensemble. De petites choses comme être connecté en état de port. Génial si vous ne proposez que des fichiers assez petits à quiconque les demande, je suppose.
psr

J'ai écrit une petite bibliothèque pour communiquer entre tous les onglets ouverts de votre site Web en utilisant une astuce HTML5.
catamphétamine

Réponses:


3

Réponse courte:

Vous ne pouvez pas vraiment transmettre les informations d'état d'un onglet à un autre ...

Longue réponse:

Vous ne pouvez pas vraiment transmettre des informations d'état d'un onglet à un autre, car cela constituerait une violation très grave du sandboxing et de la sécurité.

Vous pouvez cependant passer indirectement l' état entre deux onglets par:

Une autre option consisterait simplement à communiquer via des cookies pour transmettre des informations entre 2 onglets, mais cela provoquerait très probablement des problèmes, dépendrait fortement du navigateur et nécessiterait des rechargements de page (et pour être honnête, je n'ai jamais essayé celui-là et j'y ai juste pensé, mais d' autres ont fait cela ) .

Donc, comme les extensions de navigateur sont évidemment un chemin assez limitatif, vous devriez suivre le chemin des communications client-serveur et développer un système pour permettre aux clients de publier des événements sur un serveur, qui les redistribue ensuite (ou tout autre type de diffusion) à d'autres clients via un protocole de communication de votre choix.


Mise à jour 1: comme quelqu'un l'a mentionné dans un commentaire avant de le supprimer (ne peut pas donner de crédit car il ne s'affiche pas dans la boîte de réception, désolé)

HTML5 présente l' window.postMessageAPI.

Pour un exemple de travail, consultez le billet de blog de John Resig sur la messagerie entre fenêtres . Et très intéressant, si vous regardez les commentaires sur ce post, vous remarquerez que quelqu'un appelé Malte mentionne une bibliothèque qu'ils ont écrite pour utiliser window.postMessagesur les navigateurs modernes, ou une version basée sur les cookies sur les navigateurs plus anciens.

Lisez-les pour plus de détails et d'exemples:

Mise à jour 2:

Gardez à l'esprit que, comme 2012-03-04, la spécification HTML5 est toujours un brouillon, donc certaines fonctionnalités pourraient être supprimées . À utiliser donc avec précaution ...


Je me trompe apparemment, car HTML5 introduit en effet l'API window.postMessage.
haylem

De plus, si vous lisez le blog de John Resig sur la messagerie inter-fenêtres et les commentaires, vous remarquerez que quelqu'un appelé Malte mentionne une [bibliothèque] [3] qu'ils ont écrite pour l'utiliser sur les navigateurs modernes, ou une version basée sur les cookies pour anciens navigateurs, donc mon cookie n'était pas si fou.
haylem

3

J'ai récemment découvert Intercom , qui utilise le stockage local pour implémenter la messagerie de diffusion entre les fenêtres. Le stockage local déclenche un événement ( onstorage) lorsque les données changent, donc aucune interrogation n'est nécessaire. L'interphone permet à toutes les pages d'un domaine de communiquer, quelle que soit la façon dont elles ont été ouvertes.


1

Si vos fenêtres (pages) sont du même domaine (origine), localStoragepeuvent être utilisées pour partager des données et diffuser des messages. Une chose que vous devez considérer est que chaque fenêtre de navigateur (page) fonctionne dans un thread séparé. Donc, si nous parlons de communication entre fenêtres, nous parlons également de multithreading.

Vous devriez également considérer certains localStorageproblèmes avec IE:

  • J'ai effectué quelques tests pour localStorage dans IE8. Après plusieurs milliers de modifications apportées à localStorage, les fenêtres de la même origine cessent de recevoir des événements de «stockage». Plus encore, alors vous essayez de lire à partir du même élément localStorage, les valeurs peuvent être différentes dans différentes fenêtres. Donc, je dirais que IE8 ne prend pas en charge localStorage

  • IE9 et IE10 appellent le gestionnaire d'événements «stockage» même si localStorage est modifié à partir de cette fenêtre ( cela est contraire aux spécifications ).

  • Il existe également des problèmes connus avec IE11 .

J'ai récemment publié la bibliothèque de communication inter - fenêtres (toutes les fonctionnalités sont décrites dans le fichier Lisez-moi). Il permet le partage de données sans fil, la diffusion d'événements. Il résout également certains problèmes IE (IE8 n'est certainement pas pris en charge, le bogue IE11 avec iframe dans un parent d'origine différent ne peut être résolu que par la correction d'IE - en attendant la mise à jour d'IE11).

En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.