web-dev-qa-db-fra.com

En javascript, comment puis-je identifier de manière unique une fenêtre de navigateur parmi une autre qui se trouvent sous le même sessionId cookiedbased

Les utilisateurs de mon application Web peuvent avoir plusieurs fenêtres de navigateur ouvertes et pointer vers la même page. Je voudrais que l'état de certaines choses dans la page (chargé via ajax) soit conservé dans les publications. Je peux soit stocker dans un cookie ou sur mon serveur. Quoi qu'il en soit, je ne vois pas comment distinguer chaque fenêtre.

Par exemple, supposons que l'utilisateur Bob ait deux fenêtres de navigateur ouvertes sur la page ListOfSomething. Chaque liste a un attribut LoadedPageNumber que je dois conserver. Sinon, les utilisateurs se retrouvent toujours à la page 1 lors de l'actualisation. Bob a peut-être chargé la fenêtre de navigateur 1 et l'a pointée à la page 5, puis chargé la fenêtre de navigateur 2 et l'a pointée à la page 14. Si je stocke simplement l'attribut en fonction de l'identifiant de session, Bob obtiendra la page 14 dans la fenêtre 1 s'il l'actualise.

Notez que mes variables d'état sont en réalité beaucoup plus complexes que ce simple exemple et que mon incapacité à les conserver pourrait entraîner de gros problèmes (faiblesses dans mon application).

J'ai besoin d'une sorte d'identifiant de fenêtre de navigateur ou de quelque chose. Il faut bien sûr que ce soit une solution multi-navigateurs (IE6 +, Wekbit? +, FF2 +)

Des idées?

Remarque sur la pertinence: n'oubliez pas que cela est également utile dans le cas où vous mélangez d'anciennes pages basées sur des formulaires avec de nouveaux éléments activés AJAX. Parfois, vous devez poster les formulaires et vous ne voulez pas perdre certaines valeurs d'état côté client.

28
srmark

vous pouvez définir votre propre nom de fenêtre, la syntaxe exacte m’échappe pour le moment, mais vous pouvez utiliser l’heure et l’identifiant de session actuels pour créer un identifiant unique au chargement de la fenêtre, puis utiliser cet identifiant

Cela se ferait de la même manière que vous définissez un nom dans la fonction javascript window.open () (mais vous pouvez le faire vous-même, au lieu d'une nouvelle fenêtre).

spectacles googler:

self.window.name = myclass.getUniqueWindowId (thisSession);

METTRE À JOUR

En ce qui concerne votre besoin de sauvegarder ceci d’actualisation à actualisation, j’ai fait quelques tests et il a l’ambition de le sauvegarder d’actualisation à actualisation. En utilisant Firefox 3, lors du chargement initial, le nom de la fenêtre est vide et en appuyant plusieurs fois sur CTRL + R, le nom de la fenêtre a été rempli. J'ai ensuite commenté le réglage du code de nom et rechargé et il a toujours conservé le nom.

<script type="text/javascript">

    alert( self.window.name );

    self.window.name = "blah";

</script>

METTRE À JOUR

Je dois faire remarquer le commentaire ci-dessous sur le plug-in 'jquery-session' de jQuery, qui fonctionne vraiment et offre bien plus que ce dont il est question ici.

Bien que , il convient également de préciser qu’il s’appuie sur le stockage Web de HTML5, non pris en charge par les anciennes versions de IE .

Les entreprises dépendent encore beaucoup de IE 7 ('et moins' ici au Brésil).

Sur la base de self.window.name, LA solution pour tout ce qui n'est pas conforme à HTML5, j'offre l'extrait de code suivant comme solution inter-navigateur:

<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>

J'ai trouvé la GUID _ fonction ici (pour laquelle j'ai proposé de nettoyer le code).

36
Roy Rico

Il y a longtemps, mais la réponse de Roy Rico m'a aidé aujourd'hui, alors je veux partager mon expérience. Pour gérer l'actualisation de page et les utilisations des boutons de retour en arrière, je le fais comme ça:

  • Votre serveur vérifie si le navigateur envoie le GUID avec sa demande (ne fonctionne qu'avec ajax ou envoi du formulaire)
  • Si ce n'est pas là (rafraîchissement du navigateur, backbutton), il renvoie simplement une page avec un petit script JavaScript. Ce script crée le GUID et le place dans le stockage window.name comme décrit ci-dessus. Après cela, le script crée un formulaire avec le champ masqué GUID et le soumet au serveur. L'attribut d'action utilise la même URL qu'auparavant (window.location.href)

-> Le serveur reconnaît maintenant le GUID et peut transmettre le contenu si nécessaire.

Voici mon code (le GUID que je crée sur le serveur pour des raisons de sécurité, la syntaxe "$ {gUid} provient de freemarker et insère simplement le GUID du serveur):

<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>

J'espère que ça aide quelqu'un

Soit dit en passant, cette technique ne devrait être utilisée que sur des "PAGES NON-SEO", en raison de la nécessité d'utiliser JavaScript pour obtenir le contenu. Mais en général, les pages de référencement n'ont pas besoin d'identifier la session d'onglets.

Bien sûr, de nos jours, vous pouvez utiliser le stockage de session HTML5, mais je ne veux pas compter sur cela, car j’ai également besoin d’un navigateur plus ancien pour bien fonctionner.

1
GobiRan

Qu'en est-il si votre serveur génère de manière aléatoire un identifiant et le stocke dans la page (une variable javascript) lorsqu'il est servi? Ensuite, incluez simplement cet identifiant dans la requête ajax. Cela ne vous aidera pas lors de l'actualisation du navigateur, mais tant que l'utilisateur laissera cette page en place (et laissera simplement le travail ajax faire son travail), cela devrait fonctionner correctement.

1
Herms

window.name peut être écrasé par des bibliothèques javascript personnalisées, datetimepickers, etc.

Au lieu de window.name, je vous suggère d'utiliser la méta-balise DOM Head pour stocker votre identifiant

<html><head><meta id="windowID" content="{YOUR ID}">

Une fois la page chargée, vous devez tout charger via ajax dans cette fenêtre. Vous pouvez ensuite associer cet ID à chaque requête sous forme de valeur d'en-tête (ou de données). Par exemple, dans JQuery avec ce code:

$(document)
    .ajaxSend(function(event, jqXHR, ajaxOptions) {
        jqXHR.setRequestHeader('windowID',
            document.getElementById('windowID').content);
})

Pour utiliser cette solution, vous devez avoir accès aux valeurs d'en-tête personnalisées côté serveur. Par exemple, dans le servlet Java:

protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    String windowName = request.getHeader("windowID");

Si vous stockez des informations de pagination, de tri, de filtrage, etc. côté serveur en tant qu'attribut de session, vous devez les stocker séparément jointes à l'ID de fenêtre distinct.

0
Attila

Vous pouvez utiliser le stockage de session HTML5, il vous suffit de générer un identifiant unique et de le définir sur le stockage de session!

si on lance le suivant sur 3 fenêtres:

fenêtre 1: sessionStorage.setItem('key' , 'window1');

fenêtre 2: sessionStorage.setItem('key' , 'window2');

fenêtre 3: sessionStorage.setItem('key' , 'window3');

sessionStorage.getItem('key' ); <<< ceci retournera la valeur correspondante sur la fenêtre!

fenêtre 1: sessionStorage.getItem('key' ); renvoie la fenêtre 1

fenêtre 2: sessionStorage.getItem('key' ); renvoie la fenêtre 2

fenêtre 3: sessionStorage.getItem('key'); renvoie la fenêtre 3

Je crois que vous essayez de sauvegarder une variable (séparément sur chaque onglet/fenêtre).

sessionStorage fonctionne comme un charme.

Le seul problème que vous pouvez rencontrer avec ce navigateur devrait supporter HTML 5.

0
Amjad Abdul-Ghani