Saltar al contenido

Cómo darse cuenta cuando se ha duplicado una pestaña del navegador

Luego de tanto batallar ya encontramos el resultado de este conflicto que agunos lectores de nuestra web han presentado. Si deseas aportar alguna información no dudes en dejar tu comentario.

Solución:

Meta

Solo para aclarar: el objetivo es detectar (y cerrar) una pestaña que se ha abierto a través de la opción de menú contextual “Duplicar” de Chrome.

Primer intento

La acción “Pestaña duplicada” funciona casi exactamente igual que cuando se vuelve a cargar una página después de que el usuario haya hecho clic en “Atrás” y luego en “Adelante”, por lo que básicamente está implementando una versión de esta pregunta:

function onLoad()

    if ($('#myStateInput').val() === '') // Load with no state.
        $('#myStateInput').val('already loaded'); // Set state
    else
        alert("Loaded with state. (Duplicate tab or Back + Forward)");

Eso es genial y todo, pero tú solamente desea detectar cuando “duplica la pestaña”. Para hacer esto podemos borrar el estado en onbeforeunload. Esto funciona porque onbeforeunload solo se llama cuando el usuario hace clic en “Atrás” o “Adelante”, pero no cuando se duplica una pestaña.

Segundo intento

function onLoad()

    if ($('#myStateInput').val() === '') // Load with no state.
        $('#myStateInput').val('already loaded'); // Set state
    else
        alert("Duplicate tab! Do something.");

    $(window).on('beforeunload', function() // Back or Forward buttons
    
        $('#myStateInput').val(''); // Blank the state out.
    );

Mi aplicación requería que un usuario solo pudiera iniciar sesión una vez para poder usar localStorage para almacenar registros en caché de manera confiable. El inicio de sesión usa marcas de almacenamiento local para hacer cumplir este requisito y usa window.name para saber qué usuario es el propietario de la pestaña.

El problema era que la instalación de pestañas duplicadas del navegador estropeaba la aplicación. El siguiente código obliga a que aparezca una página de inicio de sesión en la pestaña duplicada si duplican una sesión iniciada.

Esta solución fue probada en Chrome. Hace uso del hecho de que una pestaña duplicada no tiene nombre. Esta característica puede no existir en todos los navegadores.

La función preventDuplicateTab se llama muy temprano en la secuencia de carga de la página.

/* This prevents users from duplicating the tab.  If they do it
 * triggers the start page which checks for duplicate userid
 */
function preventDuplicateTab() 
  if (sessionStorage.createTS)  
    // Chrome at least has a blank window.name and we can use this
    // signal this is a duplicated tab.
    console.log("Existing sessionStorage "+sessionStorage.createTS+" 
               w.name="+window.name);
    if (!window.name) 
      window.name = "*ukn*";
      sessionStorage.createTS = Date.now(); // treat as new
      window.location = "/res/Frame.htm?page=start.htm"; // force to 
                                                               signon screen
    
   else 
    sessionStorage.createTS = Date.now();
    console.log("Create sessionStorage "+sessionStorage.createTS+" 
                                    w.name="+window.name);
  

En onLoad función, usé window.performance.getEntriesByType("navigation")[0]).type para verificar la pestaña duplicada en el navegador.

Si el valor del tipo es back_forwardese valor es una pestaña duplicada.

Comparto para quien le interese.

var navigationType = (window.performance.getEntriesByType("navigation")[0]).type;
//back_forward value is duplicate tab
if(navigationType == 'back_forward')
    alert('Can not concurrent edit dashboard...');

¡Haz clic para puntuar esta entrada!
(Votos: 0 Promedio: 0)



Utiliza Nuestro Buscador

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *