javascript - google - ¿Es posible detectar si un usuario tiene múltiples pestañas abiertas en su sitio?

google chrome

Question

Solo estoy pensando en todo el proceso de registro del sitio.

Un usuario va a su sitio, se registra y luego le dice que le envió un correo electrónico y que necesita verificar su dirección de correo electrónico. Así que presiona Ctrl + T , abre una nueva pestaña, pulsa su botón favorito de Gmail , no lee una palabra de su extenso correo electrónico de bienvenida, pero hace clic en el primer enlace que ve. Gmail abre su sitio en otra pestaña ...

No necesita ni quiere tener abiertas dos pestañas para su sitio, solo quiere ver esa maldita página a la que le ha prohibido acceder hasta que se registre.

¿Asi que que hacemos? Vi un sitio (pero olvidé lo que era) que hizo un muy buen trabajo, y realmente refrescó la primera pestaña que tenía abierta sin tener que presionar nada.

Estoy pensando, sería bueno si pudiéramos detectar si el usuario ya tiene una pestaña abierta en su sitio, podríamos cerrar la nueva pestaña de verificación automáticamente o decirle que puede cerrarla y volver a su otra pestaña (que ahora hemos actualizado y lo registramos).

O tal vez cuando recibió su molesto mensaje de "por favor revise su correo electrónico", fue directamente a su correo electrónico, reemplazando su sitio con su correo electrónico sabiendo muy bien que el correo electrónico lo vinculará de nuevo al sitio. En ese caso, no queremos cerrar la pestaña, pero ¿podría haber guardado su ubicación desde antes y redirigirlo de nuevo?

De todos modos, ese es solo el caso de uso ... la pregunta sigue en pie. ¿Podemos detectar si un usuario ya tiene abierta una pestaña en su sitio?

Esta pregunta no trata de cómo detectar cuándo un usuario ha completado el proceso de registro. El sondeo o cometa Ajax puede resolver ese problema. Específicamente, quiero saber si el usuario ya tiene una pestaña abierta en su sitio o no.

Answer 1

El usuario todavía tendrá una sesión en el servidor. ¿Por qué no almacenar la ubicación del usuario antes de registrarse? Y cuando confirman su registro, vuelva a leer la ubicación de la sesión y redirija a esa página. No se requiere magia de tabulación. Ciertamente no es lo que esperaría de un proceso de registro.

Answer 2

Llego bastante tarde a la fiesta aquí (más de un año), pero no pude evitar darme cuenta de que te habías perdido una solución increíblemente fácil y elegante (y probablemente lo que usaste en ese sitio web).

Usando JavaScript puede cambiar el nombre de la ventana que actualmente tiene abierta a través de:

window.name = "myWindow";

Luego, cuando envíe su correo electrónico de confirmación, simplemente hágalo (suponiendo que esté enviando un correo electrónico HTML):

<a href="verificationlink.php" target="myWindow">Verify</a>

Lo que debería dar como resultado que la verificationLink abra dentro de la ventana en la que ya se cargó su sitio web; si ya se ha cerrado, abrirá una nueva pestaña con el nombre de la ventana especificado.

Answer 3

Lo que tengo aquí es un caso de uso un poco diferente para usted, pero detecta si se accede al sitio en otra pestaña. En este caso, quería limitar el uso de algunas páginas del centro de llamadas a solo una pestaña. Funciona bien y es puramente del lado del cliente.

// helper function to set cookies
function setCookie(cname, cvalue, seconds) {
    var d = new Date();
    d.setTime(d.getTime() + (seconds * 1000));
    var expires = "expires="+ d.toUTCString();
    document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
}

// helper function to get a cookie
function getCookie(cname) {
    var name = cname + "=";
    var decodedCookie = decodeURIComponent(document.cookie);
    var ca = decodedCookie.split('';'');
    for(var i = 0; i < ca.length; i++) {
        var c = ca[i];
        while (c.charAt(0) == '' '') {
            c = c.substring(1);
        }
        if (c.indexOf(name) == 0) {
            return c.substring(name.length, c.length);
        }
    }
    return "";
}

// Do not allow multiple call center tabs
if (~window.location.hash.indexOf(''#admin/callcenter'')) {
    $(window).on(''beforeunload onbeforeunload'', function(){
        document.cookie = ''ic_window_id=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;'';
    });

    function validateCallCenterTab() {
        var win_id_cookie_duration = 10; // in seconds

        if (!window.name) {
            window.name = Math.random().toString();
        }

        if (!getCookie(''ic_window_id'') || window.name === getCookie(''ic_window_id'')) {
            // This means they are using just one tab. Set/clobber the cookie to prolong the tab''s validity.
            setCookie(''ic_window_id'', window.name, win_id_cookie_duration);
        } else if (getCookie(''ic_window_id'') !== window.name) {
            // this means another browser tab is open, alert them to close the tabs until there is only one remaining
            var message = ''You cannot have this website open in multiple tabs. '' +
                ''Please close them until there is only one remaining. Thanks!'';
            $(''html'').html(message);
            clearInterval(callCenterInterval);
            throw ''Multiple call center tabs error. Program terminating.'';
        }
    }

    callCenterInterval = setInterval(validateCallCenterTab, 3000);
}

Answer 4

Para agregar a otras respuestas: también puede usar localStorage. Tener una entrada como ''openedTabs''. Cuando se abre su página, aumente este número. Cuando el usuario abandona la página, disminuya.

Answer 5

Puede detener la funcionalidad de la página cuando el usuario abre otra pestaña u otra ventana o incluso otro navegador

$(window).blur(function(){
    // code to stop functioning or close the page  
});

Answer 6

Puede enviar una solicitud AJAX cada X segundos desde la pestaña original que le pregunta al servidor si recibió una solicitud del correo electrónico.

No puede cerrar la segunda pestaña automáticamente, pero puede hacer que pregunte al servidor después de 3X segundos si se escuchó desde la primera pestaña.