1. Inicio
  2. Pregunta y respuesta
  3. Javascript: compartir datos entre pestañas

Javascript: compartir datos entre pestañas

2009-09-02 31 views
22

¿Cuál es la mejor forma de compartir datos entre pestañas abiertas en un navegador?Javascript: compartir datos entre pestañas

Fuente

2009-09-02 alexey

+1

Obtenga usted mismo fiddler [http://www.fiddler2.com/fiddler2/] y mire la magia – epascarello

+0

Consulte la pregunta similar http://stackoverflow.com/questions/2236828/javascript-make-two-tabs-windows- comunique – brillout

+9

Busqué en Google casi exactamente esta pregunta. No estoy seguro de por qué está cerrado porque no es una pregunta real ... – Felix

Respuesta

26

Para una solución más moderna echa un vistazo a https://stackoverflow.com/a/12514384/270274

Cita:

me quedo con la solución local de datos compartida mencionada en la pregunta usando localStorage. Parece ser la mejor solución en términos de confiabilidad, eficiencia y compatibilidad del navegador.

localStorage se implementa en todos los navegadores modernos.

El evento storage se activa cuando otras pestañas realiza cambios en localStorage. Esto es bastante útil para fines de comunicación.

Referencia:
http://dev.w3.org/html5/webstorage/
http://dev.w3.org/html5/webstorage/#the-storage-event

Fuente

2011-01-16 14:54:13 brillout

+0

Para el alcance de clave almacenada en [localStorage vs sessionStorage] (https://stackoverflow.com/a/9784994/465053) – RBT

2

La única forma en que puedo pensar: constante comunicación ajax con el servidor para informar cualquier acción del usuario en las otras pestañas.

Fuente

2009-09-02 08:51:37 Alsciende

1

Dado que estas pestañas están abiertas con el mismo sitio, puede considerar crear un script ajax que informe las acciones del usuario al servidor y acoplarlo con otro script ajax que lea esos informes y los refleje en la ventana actual.

Fuente

2009-09-02 08:53:36 n1313

+0

¿Quiere decir hacer una llamada ajax al servidor para comprobar si algo ha cambiado cada menos de un segundo? ese no es el camino ... – vsync

+0

Si necesita que las cosas sucedan en vivo, esto requeriría hacer un montón de solicitudes todo el tiempo. Sin embargo, esto puede resolverse haciendo que el servidor mantenga la solicitud durante un período de tiempo más largo hasta que haya datos (o hasta que se exceda el tiempo de espera). Ver también [Comet (wikipedia)] (http://en.wikipedia.org/wiki/Comet_ (programming% 29) y mi respuesta. Esta es también la forma en que funcionan el EtherPad y el Chat de Facebook. – Krinkle

0

Una forma de hacer esto es no permitir que la ventana de chat dependa de las pestañas. Cargue las pestañas como componentes separados de AJAX que, al volver a cargar, no afectan al componente de chat.

Fuente

2009-09-02 08:56:39 Randell

0

Según los requisitos, también puede utilizar cookies/sesiones. Sin embargo, esto significa que solo se podrá acceder a los datos en la primera página cargada de cada pestaña.

Si ya tiene dos pestañas abiertas, cambiar algo en una no cambiará la otra a menos que use algo de AJAX.

Fuente

2009-09-02 09:06:26 DisgruntledGoat

+2

No es cierto, la cookie se puede sondear al igual que un servicio AJAX. –

2

¿Qué tal utilizar una cookie para almacenar datos en una sola pestaña y sondearla en otra pestaña? no sé todavía si una cookie es compartida entre las pestañas, pero sólo una idea ... ahora

Fuente

2009-09-02 09:14:48 Chris

+0

Sí, las cookies solo están vinculadas a dominios, por lo tanto, se comparten entre pestañas. Sin embargo, uno debe sondear la cookie de forma continua, no puede escuchar los cambios de cookies. – sibidiba

9

Si la primera pestaña se abre la segunda pestaña automágicamente, se puede hacer algo como esto:

primera ficha:

//open the first tab 
var child_window = window.open(...params...);

Segunda pestaña:

// get reference to first tab 
var parent_window = window.opener;

A continuación, puede llamar a las funciones y hacer todo tipo de cosas por las fichas:

// copy var from child window 
var var_from_child = child_window.some_var; 

// call function in child window 
child_window.do_something('with', 'these', 'params') 

// copy var from parent window 
var var_from_parent = parent_window.some_var; 

// call function in child window 
parent_window.do_something('with', 'these', 'params')

Fuente

2009-09-02 12:19:34 spudly

+0

No creo que funcione en situaciones donde el usuario abre una página en una pestaña separada. –

3

Acabo de echar un vistazo a cómo lo hace el Facebook Chat y mantienen una solicitud al servidor abierta por un poco menos de un minuto. Si los datos vuelven al servidor, el servidor devuelve el mensaje a cada solicitud abierta. Si no hay datos regresan en un minuto, vuelve a solicitar y continúa haciendo esto (durante cuánto tiempo, no estoy seguro).

Fuente

2010-12-01 20:12:51 Brian

+0

Sí, este método se conoce como "cometa". Desde el lado del cliente, no es diferente al simple sondeo AJAX (por ejemplo, realizar una solicitud AJAX, procesar la respuesta y realizar otra solicitud). Sin embargo, el servidor es atípico en comparación con el AJAX tradicional. El servidor no lo devolverá inmediatamente después de haberlo hecho, sino que lo mantendrá abierto (por ejemplo, solicitud de PHP) y hará un while() como bucle hasta que haya nueva información (o cuando n se excede el tiempo de espera, es decir, 50 segundos). Lea más: http://en.wikipedia.org/wiki/Comet_(programming%29. No es una tecnología de empuje real, pero lo más cerca posible. – Krinkle

+2

¿Por qué no solo usa conectores? –

+3

Esto no se acerca a responder la pregunta: ¿por qué se aceptó? La pregunta era cómo comunicarse entre las pestañas del navegador, no entre el servidor y el navegador –

4

Consulte también otro hilo StackOverflow: Javascript communication between browser tabs/windows.

En mi opinión, hay dos buenos métodos. Uno puede satisfacerlo mejor dependiendo de lo que necesite.

Si cualquiera de estos: Usted

  • no se puede almacenar en el servidor de información
  • no puede hacer muchas peticiones HTTP
  • desea almacenar solamente un poco de la información [1]
  • quieren ser puro JavaScript del lado del cliente/
  • sólo necesita que funcione entre las pestañas/ventanas en el mismo navegador

-> use cookies (setCookie para enviar, getCookie/setTimeout para recibir). Una buena biblioteca que hace esto es http://theprivateland.com/bncconnector/index.htm

Si cualquiera de estos: Usted

  • desea almacenar en el servidor de información
  • desea almacenar una gran cantidad de información o almacenarla en un asunto relacionado (es decir, tablas o matrices multidimensionales [2])
  • también lo necesitan en diferentes navegadores (no solo entre pestañas/ventanas en el mismo navegador) o incluso diferentes computadoras/usuarios.

-> use Comet (la solicitud HTTP de larga duración permite a un servidor web, básicamente, enviar datos a un navegador) para recibir datos. Y cortas solicitudes POST para enviar datos.

Etherpad y Facebook Chat también usan la técnica Comet.

[1] Cuando se utiliza localStorage más datos se pueden almacenar obviamente, pero desde que le repliegue de las cookies no pueden confiar en esto todavía. A menos que su aplicación sea para navegadores modernos solo en cuyo caso esto está bien.

[2] Los datos complicados también pueden almacenarse en cookies (codificación JSON), pero no es muy limpio (y necesita métodos alternativos para navegadores sin JSON.stringify/JSON.parse) y puede fallar en escenarios que implican concurrencia . No es posible actualizar una propiedad de un valor de cookie JSON. Tienes que analizarlo, cambiar una propiedad y sobrescribir el valor. Esto significa que otra edición podría deshacerse teóricamente. De nuevo, cuando se usa localStorage esto es menos problemático.

Fuente

2011-11-22 18:30:00 Krinkle

Cuestiones relacionadas

 Cuestiones relacionadas