ajax - navegador - popup javascript ejemplo
En javascript, ¿cómo puedo identificar de forma única una ventana del navegador de otra que están bajo la misma sesión de sesión cookied (4)
Los usuarios de mi aplicación web pueden tener abiertas más de una ventana del navegador y señalar a la misma página. Me gustaría que el estado de ciertas cosas en la página (cargadas a través de ajax) se conserve en las devoluciones. Puedo almacenar en una cookie o en mi servidor. De cualquier manera, no puedo pensar en cómo puedo distinguir cada ventana.
Por ejemplo, supongamos que el usuario Bob tiene dos ventanas de navegador abiertas en la página Lista de Algo. Cada lista tiene un atributo LoadedPageNumber que necesito persistir. De lo contrario, los usuarios siempre terminan en la página 1 cuando se actualizan. Bob pudo haber cargado la ventana del navegador 1 y apuntarla a la página 5 y luego cargar la ventana del navegador 2 y apuntarla a la página 14. Si solo almaceno el atributo basado en la identificación de la sesión, Bob obtendrá la página 14 en la ventana 1 si la refresca.
Tenga en cuenta que mis variables de estado son en realidad mucho más complejas que este simple ejemplo y mi incapacidad para persistirlas podría generar grandes problemas (debilidades en mi aplicación).
Necesito algún tipo de identificación de ventana del navegador o algo así. Por supuesto, debe ser una solución de navegador cruzado (IE6 +, Wekbit? +, FF2 +)
¿Algunas ideas?
Nota sobre la relevancia: tenga en cuenta que esto también es útil para el caso en el que está mezclando páginas basadas en formularios más antiguos con artículos habilitados para AJAX más nuevos. Algunas veces necesita devolver los formularios y no desea perder algunos valores de estado del lado del cliente.
¿Qué tal si tu servidor genera al azar una ID y la almacena en la página (alguna variable de JavaScript) cuando se sirve? Luego solo incluye esa identificación en la solicitud de Ajax. No ayudará en una actualización del navegador, pero mientras el usuario deje esa página en su lugar (y simplemente deje que las cosas del Ajax hagan su trabajo) debería funcionar bien.
Hace mucho tiempo, pero la respuesta de Roy Rico me ayudó hoy, así que quiero compartir mi experiencia. Para manejar la actualización de la página y el uso del botón de la página, lo estoy haciendo así:
- Su servidor verifica si el navegador envía el GUID con su solicitud (solo funciona con ajax o entrega de formulario)
- Si no está allí (actualización del navegador, botón de retroceso) simplemente envía de vuelta una página con un pequeño script de JavaScript. Este script crea el GUID y lo coloca en el almacenamiento window.name como se describe arriba. Después de eso, el script crea un formulario con el GUID como campo oculto y lo envía al servidor. El atributo de acción usa la misma URL que antes (window.location.href)
-> Ahora el servidor reconoce el GUID y puede entregar el contenido según sea necesario.
Aquí está mi código (el GUID que creo en el servidor por razones de seguridad, la sintaxis "$ {gUid} es de freemarker y solo inserta el Guid del servidor):
<script>
$(window).load(
function () {
if (!window.name.match(/^GUID-/)) {
window.name = "GUID-" + "${gUid}";
}
$(''<form action=''+window.location.href+'' method="POST"><input type="hidden" name="X-GUID" id="X-GUID" value=''+window.name+''></form>'').appendTo(''body'').submit();
}
);
</script>
Espero que ayude a alguien
Por cierto, esta técnica solo debe usarse en "PÁGINAS NO DE SEO", debido a la necesidad de JavaScript para obtener el contenido. Pero, en general, las páginas de SEO no tienen necesidad de identificar la sesión de pestañas.
Por supuesto, hoy en día puede utilizar el almacenamiento de sesiones HTML5, pero no quiero confiar en eso, porque también necesito un navegador más viejo para que funcione bien.
Puede usar Almacenamiento de sesión HTML5, solo genere un ID único y configúrelo en el almacenamiento de la sesión. Lo mejor de todo es que cada ventana o pestaña tiene su propio almacenamiento de sesión. por ejemplo :
si ejecutamos lo siguiente en 3 ventanas:
ventana 1: sessionStorage.setItem (''clave'', ''ventana1'');
ventana 2: sessionStorage.setItem (''clave'', ''ventana2'');
ventana 3: sessionStorage.setItem (''clave'', ''ventana3'');
sessionStorage.getItem (''clave''); <<< ¡esto devolverá el valor correspondiente en la ventana!
ventana 1: sessionStorage.getItem (''clave''); devuelve la ventana 1
ventana 2: sessionStorage.getItem (''clave''); devuelve la ventana 2
ventana 3: sessionStorage.getItem (''clave''); devuelve la ventana 3
Creo que está intentando guardar una variable (por separado en cada pestaña / ventana).
sessionStorage funciona como encanto.
El único problema que puede enfrentar ese navegador debe ser compatible con HTML 5.
puede establecer su propio nombre de ventana, la sintaxis exacta se me escapa ahora mismo, pero puede usar la identificación de hora y sesión actual para crear una identificación única en la carga de la ventana, luego use esa identificación
Esto se haría de la misma manera que establece un nombre en la función javascript window.open (), (pero puede hacerlo en sí mismo, en lugar de en una nueva ventana)
Google muestra:
self.window.name = myclass.getUniqueWindowId (thisSession);
ACTUALIZAR
En cuanto a su necesidad de guardar esto de la actualización para actualizar, hice algunas pruebas y parece guardarlo de la actualización para actualizar. Usando Firefox 3, en la carga inicial, el nombre de la ventana está en blanco, y presionando CTRL + R una y otra vez, y se rellenó el nombre de la ventana. Luego comenté la configuración del código de nombre y volví a cargar y todavía conservaba el nombre.
<script type="text/javascript">
alert( self.window.name );
self.window.name = "blah";
</script>
ACTUALIZAR
Tengo que hacer notar el comentario a continuación sobre el complemento ''jquery-session'' de jQuery, que realmente funciona y ofrece mucho más de lo que se discute aquí.
Aunque , también se debe dejar en claro que se basa en el almacenamiento web de HTML5, que no es compatible con versiones anteriores de IE .
Corporativo todavía depende en gran medida de IE 7 (''y debajo'' aquí en Brasil).
Basado en self.window.name , la solución para todo lo que no cumple con HTML5, ofrezco el siguiente fragmento de código como una solución entre navegadores:
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script language="javascript" type="text/jscript">
//----------------------------------------------------------------------
//-- guarantees that window.name is a GUID, and that it would
//-- be preserved whilst this window''s life cicle
//----------------------------------------------------------------------
//-- window.name will be set to "GUID-<SOME_RANDOM_GUID>"
//----------------------------------------------------------------------
$(window).load(
function () {
//----------------------
var GUID = function () {
//------------------
var S4 = function () {
return(
Math.floor(
Math.random() * 0x10000 /* 65536 */
).toString(16)
);
};
//------------------
return (
S4() + S4() + "-" +
S4() + "-" +
S4() + "-" +
S4() + "-" +
S4() + S4() + S4()
);
};
//----------------------
if (!window.name.match(/^GUID-/)) {
window.name = "GUID-" + GUID();
}
}
) //--------------------------------------------------------------------
</script>
Encontré la función GUID aquí (para la cual propuse alguna limpieza del código).