JavaScript; Comunicación entre pestañas/ventanas con el mismo origen [duplicado

Question

Esta pregunta ya tiene una respuesta aquí:

• Comunicación entre pestañas o ventanas 9 respuestas

Tengo dos ventanas: ventana a y ventana B.

• La ventana A y la ventana B tienen el mismo dominio
• La ventana A y la ventana B no tienen ninguna ventana principal.

Preguntas:

1. ¿Es posible que la ventana A obtenga una referencia de la ventana B?
2. ¿Cuál es la forma más elegante de hacer que la ventana notifique algo a la ventana B?
   (incluyendo nuevas especificaciones HTML5)

Dos maneras en que soy consciente de hacer esto:

• Mensaje por servidor: donde la ventana B regulario pregunta al servidor si la ventana A ha notificado algo
• Mensaje de datos locales (HTML5): cuando la ventana A quiere notificar algo que cambia los datos locales, la ventana B regulario verifica los datos locales para cualquier cambio.

Pero las dos formas no son tan elegantes.
Por ejemplo, sería bueno obtener una referencia de la ventana B y usar Window.PostMessage () (HTML5)

El objetivo final es hacer algo como Facebook donde si abres 4 pestañas de Facebook y chat en una pestaña, el chat está actualizado en cada pestaña de Facebook, ¡lo cual está bien!

Answer 1

Me apego a la solución de datos locales compartidas mencionadas en la pregunta utilizando localStorage. Parece ser la mejor solución en términos de confiabilidad, rendimiento y compatibilidad del navegador.

localStorage se implementa en todos los navegadores modernos.

los storage Evento dispara cuando otro pestañas realiza cambios en localStorage. Esto es bastante útil para fines de comunicación.

Las referencias se pueden encontrar aquí:
Almacenamiento web
WebStorage - Evento de almacenamiento

Answer 2

El estándar BroadcastChannel permite hacer esto. En este momento se implementa en Firefox y Chrome (Puedo usar, MDN):

// tab 1
var ch = new BroadcastChannel('test');
ch.postMessage('some data');

// tab 2
var ch = new BroadcastChannel('test');
ch.addEventListener('message', function (e) {
    console.log('Message:', e.data);
});

Answer 3

SharedWorker es la especificación WhatWG/ HTML5 para un proceso común que puede comunicarse entre las pestañas.

Answer 4

Dijiste tu:

El objetivo de Utilimate es hacer algo como Facebook donde si abres 4 pestañas de Facebook y chatear en una pestaña, el chat es actualizar en cada pestaña de Facebook, ¡que está bien!

Eso debería suceder como un subproducto de su diseño, las vistas consultan el modelo (probablemente el servidor) para actualizar el chat, en lugar de tener que diseñar en la comunicación de visión cruzada. A menos que esté lidiando con la transferencia de grandes cantidades de datos, ¿por qué preocuparse por ello? Parece que complicará las cosas sin una gran ganancia.

Hace años descubrí que si lo hacía window.open Usando el nombre de una ventana existente y una URL en blanco, obtuve una referencia a la ventana existente (este comportamiento es incluso documentado en MDC y un comentario sobre los documentos msdn sugiere que también funciona en IE). Pero eso fue hace años, no sé qué tan universal es el apoyo en el mundo de hoy, y por supuesto no tendrá un nombre de ventana para buscar a menos que todas sus ventanas incluyan un nombre iframe para la comunicación, nombrado de forma única a través del código del lado del servidor, y luego se comunicó a las otras ventanas por medio del código del lado del servidor ... (pensamiento de miedo: eso en realidad podría ser factible. Almacene los nombres de las ventanas "actuales" relacionados con un registrado- En cuenta en una tabla, entregue la lista a cualquier ventana nueva creada que inicie sesión en esa cuenta, sacrifique las viejas entradas inactivas. Pero si la lista está ligeramente desactualizada, abrirá nuevas ventanas al buscar otras ... y yo El soporte de apuesta es dudoso de navegador a navegador).

Answer 5

Además de la próxima Trabajador compartido, también puedes usar mensajería de documentos cruzados, que es mucho más ampliamente soportado. En este escenario, debe haber una ventana principal que sea responsable de abrir todas las demás ventanas con window.open. Las ventanas infantiles pueden usar postmessage en su window.opener.

Si usar Flash es una opción para usted, también existe mucho más. Contracción local prácticamente compatible con cualquier cliente con flash instalado (código de ejemplo).

Otros métodos de respaldo:
complemento postmessage para jQuery con window.location.href fallback para navegadores más antiguos
Solución basada en cookies para comunicación no instantánea

Answer 6

AFAIK, es imposible comunicarse en Windows si no tienen el mismo padre.

Si ambos se han abierto desde una ventana principal, debería poder obtener las referencias variables de los padres.

En el padre, abra las ventanas de esta manera:

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

En Childa, acceda a Childb como este:

childB = window.opener.childA

Answer 7

Tengo una forma ordenada de hacer ese truco, pero con restricciones: debe permitir ventanas emergentes para su dominio y siempre se abrirá una página (como pestaña o como emergente) que implementará comunicaciones entre Windows.

Aquí hay un ejemplo:http://test.gwpanel.org/test/page_one.html(actualizar la página después de habilitar las ventanas emergentes para el dominio)

La característica principal de este truco: la ventana emergente se está abriendo con el fragmento de URL '#' al final, este navegador obliga a no cambiar la ubicación de la ventana y almacenar todos los datos. Y ventana. PostMessage haga el resto.