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?
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!Réponses:
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:
window.postMessagepage de MDC ,window.postMessagewindow.postMessageavec des liens supplémentaires.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 ...
la source
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.la source
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).
la source