El Atributo ONPAGESHOW

El atributo onpageshow se activa cuando La página se carga.

El atributo onpageshow se activa cuando:

  • La página se carga por primera vez

  • El usuario regresa mediante el historial (botones atrás/adelante)

  • La página se restaura desde la caché del navegador (bfcache)

Es parte de la Page Visibility API y complementa:

  • onpagehide: Cuando la página deja de ser visible

  • visibilitychange: Cambios en la visibilidad de la pestaña

Sintaxis Básica

HTML:

<body onpageshow="miFuncion(event)">

JavaScript:

window.addEventListener('pageshow', (event) => {
    // Tu código aquí
});

Ejemplos Clave

Ejemplo 1: Actualización de Tiempo de Última Vista

JavaScript:

function actualizarUltimaVista() {
    const now = new Date();
    document.getElementById('lastShown').textContent = now.toLocaleString();
}

Ejemplo 2: Restauración de Estado Persistente

JavaScript:

if(event.persisted) {
    const estado = localStorage.getItem('miEstado');
    // Restaurar lógica
}

Ejemplo 3: Actualización de Datos Dinámicos

JavaScript:

async function actualizarDatos() {
    const response = await fetch('/api/datos-actuales');
    // Actualizar UI
}

Propiedad event.persisted

Indica si la página fue cargada desde la caché:

JavaScript:

if(event.persisted) {
    console.log('Página restaurada desde cache');
} else {
    console.log('Carga inicial de la página');
}

Diferencias con Eventos Similares

Evento Momento de Activación
onpageshow Después de que la página se muestra
DOMContentLoaded Cuando el DOM está listo
onload Cuando todos los recursos cargan
visibilitychange Cuando cambia la visibilidad

Buenas Prácticas

Optimiza el rendimiento:

JavaScript:

// Usar debounce para actualizaciones frecuentes
let timeout;
window.addEventListener('pageshow', () => {
    clearTimeout(timeout);
    timeout = setTimeout(actualizarDatos, 300);
});

Manejo de caché:

JavaScript:

if(event.persisted) {
    // Recargar solo datos esenciales
} else {
    // Carga completa inicial
}

Limpieza de recursos:

JavaScript:

window.addEventListener('pagehide', () => {
    // Liberar conexiones WebSocket
    // Cancelar peticiones fetch
});

Casos de Uso Avanzados

  • Aplicaciones de trading: Actualizar precios al volver

  • Juegos en línea: Sincronizar estado del juego

  • Formularios largos: Restaurar datos no enviados

  • Sistemas de autenticación: Verificar sesión activa

Compatibilidad

Navegador Soporte
Chrome ✅ 24+
Firefox ✅ 10+
Safari ✅ 7+
Edge ✅ 17+

Conclusión

El atributo onpageshow es esencial para:

  • Mejorar la experiencia de navegación

  • Mantener datos actualizados

  • Gestionar recursos eficientemente

  • Proporcionar continuidad en aplicaciones

Consejos finales:

  • Usa event.persisted para optimizar cargas

  • Combina con localStorage/sessionStorage

  • Prueba con diferentes navegadores

  • Monitorea el rendimiento con DevTools

 

<!-- Ejemplo Final: Sistema de Cache Avanzado -->
<script>
const CACHE_VERSION = 'v1';

window.addEventListener('pageshow', async (event) => {
    if(event.persisted) {
        const cache = await caches.open(CACHE_VERSION);
        const response = await cache.match('/datos-criticos');
        if(response) {
            actualizarUI(await response.json());
        }
    }
    actualizarDatosDesdeServidor();
});
</script>

Este tutorial te proporciona las bases para implementar comportamientos inteligentes de recarga y restauración en tus aplicaciones web. ¡Experimenta y mejora la experiencia de tus usuarios!

 

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>Tutorial: Uso del atributo onpageshow</title>
    <style>
        .demo-container {
            border: 2px solid #3498db;
            padding: 20px;
            margin: 20px;
            border-radius: 8px;
        }
        .timestamp {
            color: #2ecc71;
            font-weight: bold;
        }
        .cached-data {
            background-color: #f8f9fa;
            padding: 15px;
            margin: 10px 0;
        }
        #liveData {
            min-height: 100px;
            border: 1px dashed #7f8c8d;
            padding: 10px;
        }
    </style>
</head>
<body onpageshow="manejarPageShow(event)">
    <h1>Tutorial del atributo <code>onpageshow</code></h1>

    <!-- Ejemplo 1: Actualización básica -->
    <div class="demo-container">
        <h2>1. Actualización de última vista</h2>
        <p>Última vez visible: <span id="lastShown" class="timestamp">Nunca</span></p>
    </div>

    <!-- Ejemplo 2: Restauración de estado -->
    <div class="demo-container">
        <h2>2. Estado persistente</h2>
        <div class="cached-data">
            <button onclick="incrementCounter()">Incrementar (+1)</button>
            <p>Contador: <span id="counter">0</span></p>
        </div>
    </div>

    <!-- Ejemplo 3: Actualización de datos en vivo -->
    <div class="demo-container">
        <h2>3. Datos en tiempo real</h2>
        <div id="liveData">Cargando datos...</div>
    </div>

    <script>
        // Variables de estado
        let counter = 0;
        let lastUpdate = null;

        // Manejador principal de pageshow
        function manejarPageShow(event) {
            // Ejemplo 1: Actualizar marca de tiempo
            actualizarUltimaVista();

            // Ejemplo 2: Restaurar estado desde localStorage
            if(event.persisted) {
                restaurarEstado();
            }

            // Ejemplo 3: Actualizar datos dinámicos
            actualizarDatosEnVivo();
        }

        // Ejemplo 1: Actualización de tiempo
        function actualizarUltimaVista() {
            const now = new Date();
            document.getElementById('lastShown').textContent = 
                `${now.toLocaleTimeString()} (${now.toLocaleDateString()})`;
        }

        // Ejemplo 2: Sistema de persistencia
        function incrementCounter() {
            counter++;
            document.getElementById('counter').textContent = counter;
            localStorage.setItem('pageCounter', counter);
        }

        function restaurarEstado() {
            const savedCounter = localStorage.getItem('pageCounter');
            if(savedCounter) {
                counter = parseInt(savedCounter);
                document.getElementById('counter').textContent = counter;
            }
        }

        // Ejemplo 3: Datos dinámicos
        async function actualizarDatosEnVivo() {
            try {
                const response = await fetch('https://api.coindesk.com/v1/bpi/currentprice.json');
                const data = await response.json();
                const price = data.bpi.USD.rate;
                document.getElementById('liveData').innerHTML = `
                    <h3>Precio de Bitcoin</h3>
                    <p>$${price} USD</p>
                    <small>Actualizado: ${new Date().toLocaleTimeString()}</small>
                `;
            } catch (error) {
                document.getElementById('liveData').innerHTML = 
                    "Error cargando datos. Intente recargar la página.";
            }
        }

        // Inicialización
        window.addEventListener('load', () => {
            // Cargar estado inicial
            restaurarEstado();
            actualizarDatosEnVivo();
            
            // Configurar evento de visibilidad
            document.addEventListener('visibilitychange', () => {
                if(document.visibilityState === 'visible') {
                    actualizarDatosEnVivo();
                }
            });
        });
    </script>
</body>
</html>