81 votes

Javascript; communication entre onglets / fenêtres de même origine

J'ai deux fenêtres: Une fenêtre et de la fenêtre B.

  • fenêtre Une fenêtre et B ont le même domaine
  • fenêtre Une fenêtre et B n'ont pas de fenêtre parent.

Questions:

  1. Est-il possible pour Une fenêtre pour obtenir une référence de la fenêtre B?
  2. quelle est la façon la plus élégante de faire Une fenêtre notifier quelque chose à la fenêtre B?
    (y compris les nouvelles spécifications HTML5)

Deux façons que je suis conscient de faire ceci:

  • messagerie par le serveur: lorsque la fenêtre B regulièrement demande au serveur si Une fenêtre a notifié à quelque chose
  • messagerie par des données locales (HTML5): lorsque la fenêtre Un veut notifier quelque chose, il modifie les données locales, la fenêtre B vérifie régulièrement les données locales pour toutes les modifications.

Mais les deux façons de faire sont pas très élégante.
Par exemple, il serait agréable d'avoir une référence de la fenêtre B et de l'utilisation de la fenêtre.postMessage() (HTML5)

But ultime est de faire quelque chose comme facebook où si vous ouvrez 4 facebook onglets et de chat dans l'un onglet, le chat est actualisée à chaque facebook onglet, qui est soignée!

129voto

brillout.com Points 2289

Je suis coller à l'locale partagée de la solution de données mentionnées dans la question à l'aide de localStorage. Il semble être la meilleure solution en termes de fiabilité, d'efficacité et de compatibilité du navigateur.

localStorage est mis en œuvre dans tous les navigateurs modernes.

L' storage événement se déclenche lorsque les autres onglets modifie localStorage. C'est assez pratique pour des fins de communication.

Référence:
http://dev.w3.org/html5/webstorage/
http://dev.w3.org/html5/webstorage/#the-storage-event

13voto

rektide Points 370

SharedWorker est la spécification WHATWG / HTML5 pour un processus commun pouvant communiquer entre onglets.

4voto

T.J. Crowder Points 285826

Vous avez dit que votre:

utlimate but est de faire quelque chose comme facebook où si vous ouvrez 4 facebook onglets, et le chat dans un onglet, le chat est à réaliser sur chaque facebook onglet, ce qui est chouette!

Ce qui devrait passer comme un sous-produit de votre conception, le point de vue de l'interrogation du modèle (sans doute le serveur) pour les mises à jour à la discussion, plutôt que d'avoir à concevoir dans la croix-vue de la communication. Sauf si vous avez affaire avec le transfert de quantités énormes de données, pourquoi s'en soucier? Il semble que ça va compliquer les choses sans un gain énorme.

Il y a des années, j'ai trouvé que si je faisais window.open en utilisant le nom d'une fenêtre existante et une URL vide, j'ai eu une référence à la fenêtre existante (ce comportement est même documenté sur les MDC et un commentaire sur la MSDN docs indique, il fonctionne dans IE ainsi). Mais c'était il y a des années, je ne sais pas comment universel le support est dans le monde d'aujourd'hui, et bien sûr, vous n'aurez pas le nom d'une fenêtre à chercher, à moins que toutes vos fenêtres comprennent un nommé iframe pour la communication, nommé uniquement via le code côté serveur, et ensuite communiqué à l'autre de windows par le biais de code côté serveur... (pensée Effrayante: Que ça pourrait être faisable. Stocker le "courant" de la fenêtre des noms liés à un connecté en compte dans un tableau, donner la liste de toutes les nouvelles fenêtre créée qui se connecte à son compte, à l'abattage de vieux entrées inactives. Mais si la liste est un peu hors de date, vous allez ouvrir de nouvelles fenêtres lors de la recherche pour d'autres... Et je parie que le soutien est vraiment difficile à partir d'un navigateur à l'autre.)

4voto

Hazy Joe Aardvark Points 1389

D'ailleurs la prochaine SharedWorker, vous pouvez également utiliser la messagerie inter-document, qui est beaucoup plus largement pris en charge. Dans ce scénario, il doit être une fenêtre principale qui est responsable de l'ouverture de toutes les fenêtres avec window.open. L'enfant de windows pouvez ensuite utiliser postMessage sur leur window.opener.

Si l'utilisation du flash est une option pour vous, il est également la plus ancienne LocalConnection pratiquement pris en charge sur tous les clients avec flash d'installé (exemple de code).

D'autres réserves méthodes:
postMessage plugin pour jQuery avec fenêtre.emplacement.href solution de repli pour les navigateurs plus anciens
basé sur un cookie pour les non-communication instantanée

1voto

Pekka 웃 Points 249607

Autant que je sache, il est impossible de communiquer entre fenêtres si elles n’ont pas le même parent.

S'ils ont tous deux été ouverts à partir d'une fenêtre parent, vous devriez pouvoir obtenir les références de variable du parent.

Dans le parent, ouvrez les fenêtres comme ceci:

 childA = window.open(...);
childB = window.open(...)
 

dans ChildA, accédez à childB comme ceci:

 childB = window.opener.childA
 

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X