Podría alguien por favor compartir la experiencia /código de cómo podemos detectar el botón atrás del navegador haga clic en (para cualquier tipo de navegadores)?

Necesitamos para atender todas navegador que no es compatible con HTML5

InformationsquelleAutor Nil Pun | 2013-07-11

10 Comentarios

  1. 49

    El ‘popstate’ evento sólo funciona cuando la llevas algo antes. Así que usted tiene que hacer algo como esto:

    jQuery(document).ready(function($) {
    
      if (window.history && window.history.pushState) {
    
        window.history.pushState('forward', null, './#forward');
    
        $(window).on('popstate', function() {
          alert('Back button was pressed.');
        });
    
      }
    });

    Para el navegador de compatibilidad con versiones anteriores recomiendo: history.js

    • esto no distinguir entre el botón atrás o adelante, sólo popstate, que puede ser tanto
    • El código funciona perfectamente en el navegador de escritorio.Pero en el navegador del móvil no funciona correctamente
    • Pero alerta de incendio en backword y hacia delante tanto, ¿cómo se puede detectar sólo haga clic en la espalda
    • Esto funciona a la perfección!!! Incluso para móviles o pc! Gracias!!
    • «El ‘popstate’ evento sólo funciona cuando la llevas algo antes». Esto es ORO! Hay muchos ejemplos por ahí, pero lo más importante es que este presupuesto exacto!
  2. 10

    hay un montón de maneras de cómo se puede detectar si el usuario ha hecho clic en el botón Atrás. Pero todo depende de cuáles son sus necesidades. Tratar de explorar los vínculos abajo, que debería ayudar.

    Detectar si el usuario pulsa el botón «Atrás» en la página actual:

    Detectar si la página actual es visitada después de pulsar el botón «Atrás» en la anterior(«Adelante») página:

  3. 6

    Encontrado que esto funciona bien con todos los navegadores y móviles back_button_override.js .

    (Añadido un temporizador para safari 5.0)

    //managage back button click (and backspace)
    var count = 0; //needed for safari
    window.onload = function () { 
        if (typeof history.pushState === "function") { 
            history.pushState("back", null, null);          
            window.onpopstate = function () { 
                history.pushState('back', null, null);              
                if(count == 1){window.location = 'your url';}
             }; 
         }
     }  
    setTimeout(function(){count = 1;},200);
  4. 3

    En javascript, navegación tipo 2 significa que el navegador del botón atrás o adelante de hacer clic y el navegador es realmente el contenido de la memoria caché.

    if(performance.navigation.type == 2) {
        //Do your code here
    }
    • es una solución de trabajo, ¿por qué tasa?
    • Su trabajo en chrome, pero no en firefox
  5. 0

    Está disponible en el HTML5 Historia de la API. El evento se llama 'popstate'

    • Necesitamos para atender todas navegador que no es compatible con HTML5
  6. 0

    Deshabilitar la url del botón de la siguiente función

    window.onload = function () {
        if (typeof history.pushState === "function") {
            history.pushState("jibberish", null, null);
            window.onpopstate = function () {
                history.pushState('newjibberish', null, null);
                //Handle the back (or forward) buttons here
                //Will NOT handle refresh, use onbeforeunload for this.
            };
        }
        else {
            var ignoreHashChange = true;
            window.onhashchange = function () {
                if (!ignoreHashChange) {
                    ignoreHashChange = true;
                    window.location.hash = Math.random();
                    //Detect and redirect change here
                    //Works in older FF and IE9
                    //* it does mess with your hash symbol (anchor?) pound sign
                    //delimiter on the end of the URL
                }
                else {
                    ignoreHashChange = false;
                }
            };
        }
    };
  7. 0

    En mi caso estoy utilizando jQuery .load() a la actualización de DIVs en un SPA (página [web] app) .

    Ser nuevo para trabajar con $(window).on('hashchange', ..) detector de eventos , este resultó difícil y tomó un poco de hack en. Gracias a la lectura de un montón de respuestas y probar diferentes variaciones, finalmente descubrió cómo hacer que funcione de la siguiente manera. Lo que puedo decir, es mirando estable hasta el momento.

    En resumen – no es la variable globalCurrentHash que debe ser configurado cada vez que se carga una vista.

    Entonces cuando $(window).on('hashchange', ..) detector de eventos se ejecuta, comprueba lo siguiente:

    • Si location.hash tiene el mismo valor, significa Adelante
    • Si location.hash tiene diferente valor, significa Volver

    Me doy cuenta de que el uso de variables globales no es la solución más elegante, pero haciendo las cosas OO en JS parece difícil para mí hasta ahora. Sugerencias para la mejora/refinamiento ciertamente apreciado


    Configurar:

    1. Definir un global var :
        var globalCurrentHash = null;
    1. Cuando se llama a .load() para actualizar el DIV, actualización de la global var así :

      function loadMenuSelection(hrefVal) {
        $('#layout_main').load(nextView);
        globalCurrentHash = hrefVal;
      }
    2. En la página listo, configurar el detector para comprobar el mundial de var para ver si el Botón está pulsado:

      $(document).ready(function(){
        $(window).on('hashchange', function(){
            console.log( 'location.hash: ' + location.hash );
            console.log( 'globalCurrentHash: ' + globalCurrentHash );
      
            if (location.hash == globalCurrentHash) {
                console.log( 'Going fwd' );
            }
            else {
      
                console.log( 'Going Back' );
                loadMenuSelection(location.hash);
            }
          });
      
      });
  8. 0

    En el caso de HTML5, esto va a hacer el truco

    window.onpopstate = function() {
       alert("clicked back button");
    }; history.pushState({}, '');
  9. -1

    suponga que tiene un botón:

    <button onclick="backBtn();">Back...</button>

    Aquí el código de la backBtn método:

      function backBtn(){
                        parent.history.back();
                        return false;
                    }
    • No veo por qué @senior se puso de votos?? Esto hace el trabajo! Si hay algo que debería saber, por favor hágamelo saber. ..
    • Probablemente porque esta no tiene nada que ver con la parte posterior botón de navegación del navegador en sí. Esto es para crear una personalizada botón «atrás» en tu página.

Dejar respuesta

Please enter your comment!
Please enter your name here