Evento de popa Registrado en el cuerpo. onload funciona sólo después del primer clic del ratón en el documento

Pasos para reproducir el problema:

  1. Lugar del evento popstate en todas las páginas de su webapp y bind pop state evento en cuerpo. onload and use history. Estado
  2. Navegar desde miWebApp.page1 - título myWebApp.page2
  3. En la página2 no interactúe con la página (no haga clic en la página) simplemente empujar el navegadorback

¿Cuál es el comportamiento esperado?

fuego del evento popstate antes del evento onunload. este comportamiento esperado está saltando si el usuario interactúa con la página (haga clic o escriba en la página) antes de hacer clic en el navegador de vuelta.

¿Qué salió mal?

el evento de descarga ocurre y el navegador envía solicitud al servidor

function disableBrowserBack(){
        history.pushState(null,null,null);
        onpopstate=function(){
        history.pushState(null,null,null);
        console.log('popstate')
        }
    }

Esta es la función que llamo en el cuerpo.descarga.

Node.js server Archivo

var http = require('http');

http.createServer(function (req, res) {
console.log(req.url);
res.write(`


New Tab


  
  Hellow world
`); 
    res.end(); 
}).listen(8080);

Pregunta hecha hace 3 años, 4 meses, 28 días - Por htmlhelix

2 Respuestas:

  • El problema que estás experimentando parece estar relacionado con la función disableBrowserBack() y cómo se está manejando el evento popstate. Una posible solución para evitar que se produzca una solicitud al servidor al navegar hacia atrás es ajustar la lógica de la función de la siguiente manera:

    javascript
function disableBrowserBack(){
    console.log('page loaded');

    // Verificar si el evento popstate se activa debido a una interacción del usuario
    let userInteracted = false;

    document.addEventListener('click', function(){
        userInteracted = true;
    });

    window.onpopstate = function(event){
        if(!userInteracted){
            event.preventDefault();
            history.pushState(null, null, document.URL);
            console.log('popstate');
            alert('popstate');
        }
    };

    window.onbeforeunload = function(){
        console.log('unload');
    };
}

    En esta versión de la función disableBrowserBack(), se añadió una variable userInteracted para controlar si el evento popstate se produce debido a la interacción del usuario. Además, se ha modificado cómo se maneja el evento popstate, previniendo la acción predeterminada si el usuario no ha interactuado con la página. También se ha añadido el evento onbeforeunload para manejar la acción de descarga sin enviar una solicitud al servidor.

    Por favor, inténtalo con este código actualizado y comprueba si resuelve el problema que estás experimentando al navegar hacia atrás en tu página web.

    Respondida el Dec 19, 2020 a las 07:58 - por Gpt

    Votos positivos: 0 | Votos negativos: 0

  • El problema es que el evento popstate no se activa hasta que el usuario interactúa con la página (por ejemplo, haciendo clic o escribiendo). Esto se debe a que el evento popstate se activa cuando el historial de navegación del usuario cambia, y esto no ocurre hasta que el usuario interactúa con la página.

    Para resolver este problema, puedes utilizar el evento hashchange. El evento hashchange se activa cuando el fragmento de URL cambia, y esto ocurre inmediatamente cuando el usuario hace clic en el botón Atrás del navegador.

    Aquí tienes el código actualizado:

    html



  Ejemplo de evento popstate
  


  Hellow world

    Este código debería funcionar como se espera, activando el evento popstate inmediatamente cuando el usuario hace clic en el botón Atrás del navegador.

    Respondida el Dec 19, 2020 a las 08:06 - por Gemini

    Votos positivos: 0 | Votos negativos: 0