Cómo detectar el evento del botón Atrás del navegador - Navegador cruzado

¿Cómo detectas definitivamente si el usuario ha presionado o no el botón Atrás en el navegador?

¿Cómo se impone el uso de un botón de retroceso en la página dentro de una aplicación web de una sola página utilizando un #URLsistema?

¿Por qué demonios los botones de retroceso del navegador no activan sus propios eventos?

(Nota: según los comentarios de Sharky, he incluido un código para detectar espacios en blanco)

Entonces, he visto estas preguntas con frecuencia en SO, y recientemente me he encontrado con el problema de controlar la funcionalidad del botón de retroceso. Después de unos días de buscar la mejor solución para mi aplicación (Single-Page with Hash Navigation), he encontrado un sistema simple, sin navegador, sin biblioteca para detectar el botón de retroceso.

La mayoría de las personas recomiendan usar:

window.onhashchange = function() {
 //blah blah blah
}

Sin embargo, esta función también se llamará cuando un usuario use un elemento in-page que cambie el hash de ubicación. No es la mejor experiencia de usuario cuando su usuario hace clic y la página va hacia atrás o hacia adelante.

Para darle un resumen general de mi sistema, estoy completando una matriz con hashes anteriores a medida que mi usuario se mueve a través de la interfaz. Se parece a esto:

function updateHistory(curr) {
    window.location.lasthash.push(window.location.hash);
    window.location.hash = curr;
}

Muy claro. Hago esto para garantizar la compatibilidad entre navegadores, así como la compatibilidad con navegadores antiguos. Simplemente pase el nuevo hash a la función, y lo almacenará para usted y luego cambiará el hash (que luego se coloca en el historial del navegador).

También utilizo un botón de retroceso en la página que mueve al usuario entre páginas usando la lasthashmatriz. Se parece a esto:

function goBack() {
    window.location.hash = window.location.lasthash[window.location.lasthash.length-1];
    //blah blah blah
    window.location.lasthash.pop();
}

Entonces esto moverá al usuario de regreso al último hash y eliminará ese último hash de la matriz (no tengo botón de avance en este momento).

Entonces. ¿Cómo detecto si un usuario ha utilizado mi botón de retroceso en la página o el botón del navegador?

Al principio miré window.onbeforeunload, pero fue en vano, eso solo se llama si el usuario va a cambiar de página. Esto no sucede en una aplicación de una sola página que utiliza navegación hash.

Entonces, después de un poco más de excavación, vi recomendaciones para tratar de establecer una variable de bandera. El problema con esto en mi caso es que trataría de configurarlo, pero como todo es asíncrono, no siempre se establecerá a tiempo para la instrucción if en el cambio de hash. .onMouseDownno siempre se llamaba al hacer clic, y agregarlo a un onclick nunca lo activaría lo suficientemente rápido.

Esto es cuando comencé a mirar la diferencia entre document, y window. Mi solución final fue establecer el indicador usando document.onmouseovery deshabilitarlo usando document.onmouseleave.

Lo que sucede es que mientras el mouse del usuario está dentro del área del documento (léase: la página representada, pero excluyendo el marco del navegador), mi valor booleano se establece en true. Tan pronto como el mouse abandona el área del documento, el booleano cambia a false.

De esta manera, puedo cambiar mi window.onhashchangea:

window.onhashchange = function() {
    if (window.innerDocClick) {
        window.innerDocClick = false;
    } else {
        if (window.location.hash != '#undefined') {
            goBack();
        } else {
            history.pushState("", document.title, window.location.pathname);
            location.reload();
        }
    }
}

Notarás el cheque para #undefined. Esto se debe a que si no hay un historial disponible en mi matriz, regresa undefined. Lo uso para preguntarle al usuario si quiere irse usando un window.onbeforeunloadevento.

En resumen, y para las personas que no necesariamente usan un botón de retroceso en la página o una matriz para almacenar el historial:

document.onmouseover = function() {
    //User's mouse is inside the page.
    window.innerDocClick = true;
}

document.onmouseleave = function() {
    //User's mouse has left the page.
    window.innerDocClick = false;
}

window.onhashchange = function() {
    if (window.innerDocClick) {
        //Your own in-page mechanism triggered the hash change
    } else {
        //Browser back button was clicked
    }
}

Y ahí lo tienes. Una forma simple de tres partes para detectar el uso del botón de retroceso frente a los elementos en la página con respecto a la navegación hash.

EDITAR:

Para asegurarse de que el usuario no use la tecla de retroceso para activar el evento de retroceso, también puede incluir lo siguiente (Gracias a @thetoolman en esta pregunta ):

$(function(){
    /*
     * this swallows backspace keys on any non-input element.
     * stops backspace -> back
     */
    var rx = /INPUT|SELECT|TEXTAREA/i;

    $(document).bind("keydown keypress", function(e){
        if( e.which == 8 ){ // 8 == backspace
            if(!rx.test(e.target.tagName) || e.target.disabled || e.target.readOnly ){
                e.preventDefault();
            }
        }
    });
});

Puede probar el popstatecontrolador de eventos, por ejemplo:

window.addEventListener('popstate', function(event) {
    // The popstate event is fired each time when the current history entry changes.

    var r = confirm("You pressed a Back button! Are you sure?!");

    if (r == true) {
        // Call Back button programmatically as per user confirmation.
        history.back();
        // Uncomment below line to redirect to the previous page instead.
        // window.location = document.referrer // Note: IE11 is not supporting this.
    } else {
        // Stay on the current page.
        history.pushState(null, null, window.location.pathname);
    }

    history.pushState(null, null, window.location.pathname);

}, false);

^{Nota: Para obtener los mejores resultados, debe cargar este código solo en páginas específicas donde desea implementar la lógica para evitar cualquier otro problema inesperado.}

El evento popstate se activa cada vez que cambia la entrada del historial actual (el usuario navega a un nuevo estado). Eso sucede cuando el usuario hace clic sobre el Back botones de avance o cuando de navegador / history.back(), history.forward(), history.go()métodos son llamados mediante programación.

La event.statepropiedad is del evento es igual al objeto de estado de historial.

Para la sintaxis de jQuery, envuélvala (para agregar incluso un oyente después de que el documento esté listo):

(function($) {
  // Above code here.
})(jQuery);

Consulte también: window.onpopstate en la carga de la página

Consulte también los ejemplos en Aplicaciones de una sola página y página pushState HTML5 :

<script>
// jQuery
$(window).on('popstate', function (e) {
    var state = e.originalEvent.state;
    if (state !== null) {
        //load content with ajax
    }
});

// Vanilla javascript
window.addEventListener('popstate', function (e) {
    var state = e.state;
    if (state !== null) {
        //load content with ajax
    }
});
</script>

Esto debería ser compatible con Chrome 5+, Firefox 4+, IE 10+, Safari 6+, Opera 11.5+ y similares.

Había estado luchando con este requisito durante bastante tiempo y tomé algunas de las soluciones anteriores para implementarlo. Sin embargo, me topé con una observación y parece funcionar en los navegadores Chrome, Firefox y Safari + Android y iPhone

En la carga de la página:

window.history.pushState({page: 1}, "", "");

window.onpopstate = function(event) {

  // "event" object seems to contain value only when the back button is clicked
  // and if the pop state event fires due to clicks on a button
  // or a link it comes up as "undefined" 

  if(event){
    // Code to handle back button or prevent from navigation
  }
  else{
    // Continue user action through link or button
  }
}

Déjeme saber si esto ayuda. Si me falta algo, estaré encantado de entenderlo.

En javascript, el tipo de navegación 2significa que se hace clic en el botón de retroceso o avance del navegador y el navegador está tomando el contenido de la memoria caché.

if(performance.navigation.type == 2)
{
    //Do your code here
}

Esto definitivamente funcionará (para detectar el clic del botón Atrás)

$(window).on('popstate', function(event) {
 alert("pop");
});

Mira esto:

history.pushState(null, null, location.href);
    window.onpopstate = function () {
        history.go(1);
    };

funciona bien...

if (window.performance && window.performance.navigation.type == window.performance.navigation.TYPE_BACK_FORWARD) {
  alert('hello world');
}

Esta es la única solución que funcionó para mí (no es un sitio web de una página). Funciona con Chrome, Firefox y Safari.

La respuesta correcta ya está ahí para responder la pregunta. Quiero mencionar el nuevo JavaScript API PerformanceNavigationTiming , está reemplazando el obsoleto performance.navigation .

El siguiente código iniciará sesión en la consola "back_forward" si el usuario llegó a su página con el botón de retroceso o avance. Eche un vistazo a la tabla de compatibilidad antes de usarla en su proyecto.

var perfEntries = performance.getEntriesByType("navigation");
for (var i = 0; i < perfEntries.length; i++) {
    console.log(perfEntries[i].type);
}

Navegador: https://jsfiddle.net/Limitlessisa/axt1Lqoz/

Para control móvil: https://jsfiddle.net/Limitlessisa/axt1Lqoz/show/

$(document).ready(function() {
  $('body').on('click touch', '#share', function(e) {
    $('.share').fadeIn();
  });
});

// geri butonunu yakalama
window.onhashchange = function(e) {
  var oldURL = e.oldURL.split('#')[1];
  var newURL = e.newURL.split('#')[1];

  if (oldURL == 'share') {
    $('.share').fadeOut();
    e.preventDefault();
    return false;
  }
  //console.log('old:'+oldURL+' new:'+newURL);
}

.share{position:fixed; display:none; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,.8); color:white; padding:20px;

<!DOCTYPE html>
<html>

<head>
    <title>Back Button Example</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

</head>

<body style="text-align:center; padding:0;">
    <a href="#share" id="share">Share</a>
    <div class="share" style="">
        <h1>Test Page</h1>
        <p> Back button press please for control.</p>
    </div>
</body>

</html>

Aquí está mi opinión al respecto. La suposición es que, cuando la URL cambia pero no se hace clic dentro de lo documentdetectado, se trata de un navegador hacia atrás (sí o hacia adelante). Un clic de los usuarios se restablece después de 2 segundos para que esto funcione en páginas que cargan contenido a través de Ajax:

(function(window, $) {
  var anyClick, consoleLog, debug, delay;
  delay = function(sec, func) {
    return setTimeout(func, sec * 1000);
  };
  debug = true;
  anyClick = false;
  consoleLog = function(type, message) {
    if (debug) {
      return console[type](message);
    }
  };
  $(window.document).click(function() {
    anyClick = true;
    consoleLog("info", "clicked");
    return delay(2, function() {
      consoleLog("info", "reset click state");
      return anyClick = false;
    });
  });
  return window.addEventListener("popstate", function(e) {
    if (anyClick !== true) {
      consoleLog("info", "Back clicked");
      return window.dataLayer.push({
        event: 'analyticsEvent',
        eventCategory: 'test',
        eventAction: 'test'
      });
    }
  });
})(window, jQuery);

Pude usar algunas de las respuestas en este hilo y otras para que funcione en IE y Chrome / Edge. history.pushState para mí no era compatible con IE11.

if (history.pushState) {
    //Chrome and modern browsers
    history.pushState(null, document.title, location.href);
    window.addEventListener('popstate', function (event) {
        history.pushState(null, document.title, location.href);
    });
}
else {
    //IE
    history.forward();
}

Un componente completo puede implementarse solo si redefine la API (cambia los métodos del 'historial' del objeto) Compartiré la clase que acabo de escribir. Probado en Chrome y Mozilla Solo admite HTML5 y ECMAScript5-6

class HistoryNavigation {
    static init()
    {
        if(HistoryNavigation.is_init===true){
            return;
        }
        HistoryNavigation.is_init=true;

        let history_stack=[];
        let n=0;
        let  current_state={timestamp:Date.now()+n};
        n++;
        let init_HNState;
        if(history.state!==null){
            current_state=history.state.HNState;
            history_stack=history.state.HNState.history_stack;
            init_HNState=history.state.HNState;
        } else {
            init_HNState={timestamp:current_state.timestamp,history_stack};
        }
        let listenerPushState=function(params){
            params=Object.assign({state:null},params);
            params.state=params.state!==null?Object.assign({},params.state):{};
            let h_state={ timestamp:Date.now()+n};
            n++;
            let key = history_stack.indexOf(current_state.timestamp);
            key=key+1;
            history_stack.splice(key);
            history_stack.push(h_state.timestamp);
            h_state.history_stack=history_stack;
            params.state.HNState=h_state;
            current_state=h_state;
            return params;
        };
        let listenerReplaceState=function(params){
            params=Object.assign({state:null},params);
            params.state=params.state!==null?Object.assign({},params.state):null;
            let h_state=Object.assign({},current_state);
            h_state.history_stack=history_stack;
            params.state.HNState=h_state;
            return params;
        };
        let desc=Object.getOwnPropertyDescriptors(History.prototype);
        delete desc.constructor;
        Object.defineProperties(History.prototype,{

            replaceState:Object.assign({},desc.replaceState,{
                value:function(state,title,url){
                    let params={state,title,url};
                    HistoryNavigation.dispatchEvent('history.state.replace',params);
                    params=Object.assign({state,title,url},params);
                    params=listenerReplaceState(params);
                    desc.replaceState.value.call(this,params.state,params.title,params.url);
                }
            }),
            pushState:Object.assign({},desc.pushState,{
                value:function(state,title,url){
                    let params={state,title,url};
                    HistoryNavigation.dispatchEvent('history.state.push',params);
                    params=Object.assign({state,title,url},params);
                    params=listenerPushState(params);
                    return desc.pushState.value.call(this, params.state, params.title, params.url);
                }
            })
        });
        HistoryNavigation.addEventListener('popstate',function(event){
            let HNState;
            if(event.state==null){
                HNState=init_HNState;
            } else {
                HNState=event.state.HNState;
            }
            let key_prev=history_stack.indexOf(current_state.timestamp);
            let key_state=history_stack.indexOf(HNState.timestamp);
            let delta=key_state-key_prev;
            let params={delta,event,state:Object.assign({},event.state)};
            delete params.state.HNState;
            HNState.history_stack=history_stack;
            if(event.state!==null){
                event.state.HNState=HNState;
            }
            current_state=HNState;
            HistoryNavigation.dispatchEvent('history.go',params);
        });

    }
    static addEventListener(...arg)
    {
        window.addEventListener(...arg);
    }
    static removeEventListener(...arg)
    {
        window.removeEventListener(...arg);
    }
    static dispatchEvent(event,params)
    {
        if(!(event instanceof Event)){
            event=new Event(event,{cancelable:true});
        }
        event.params=params;
        window.dispatchEvent(event);
    };
}
HistoryNavigation.init();

// exemple

HistoryNavigation.addEventListener('popstate',function(event){
    console.log('Will not start because they blocked the work');
});
HistoryNavigation.addEventListener('history.go',function(event){
    event.params.event.stopImmediatePropagation();// blocked popstate listeners
    console.log(event.params);
    // back or forward - see event.params.delta

});
HistoryNavigation.addEventListener('history.state.push',function(event){
    console.log(event);
});
HistoryNavigation.addEventListener('history.state.replace',function(event){
    console.log(event);
});
history.pushState({h:'hello'},'','');
history.pushState({h:'hello2'},'','');
history.pushState({h:'hello3'},'','');
history.back();

    ```

Document.mouseover no funciona para IE y Firefox. Sin embargo, he intentado esto:

$(document).ready(function () {
  setInterval(function () {
    var $sample = $("body");
    if ($sample.is(":hover")) {
      window.innerDocClick = true;
    } else {
      window.innerDocClick = false;
    }
  });

});

window.onhashchange = function () {
  if (window.innerDocClick) {
    //Your own in-page mechanism triggered the hash change
  } else {
    //Browser back or forward button was pressed
  }
};

Esto funciona para Chrome e IE y no para FireFox. Todavía estoy trabajando para que FireFox sea correcto. Cualquier forma fácil de detectar el clic del botón de retroceso / avance del navegador es bienvenida, no particularmente en JQuery sino también en AngularJS o Javascript simple.

 <input style="display:none" id="__pageLoaded" value=""/>


 $(document).ready(function () {
        if ($("#__pageLoaded").val() != 1) {

            $("#__pageLoaded").val(1);


        } else {
            shared.isBackLoad = true;
            $("#__pageLoaded").val(1);  

            // Call any function that handles your back event

        }
    });

El código anterior funcionó para mí. En los navegadores móviles, cuando el usuario hizo clic en el botón Atrás, queríamos restaurar el estado de la página según su visita anterior.

Lo resolví haciendo un seguimiento del evento original que activó el hashchange(ya sea un deslizamiento, un clic o una rueda), para que el evento no se confunda con un simple aterrizaje en la página y use una bandera adicional en cada uno de mis enlaces de eventos. El navegador no volverá a configurar la bandera al falsepresionar el botón Atrás:

var evt = null,
canGoBackToThePast = true;

$('#next-slide').on('click touch', function(e) {
    evt = e;
    canGobackToThePast = false;
    // your logic (remember to set the 'canGoBackToThePast' flag back to 'true' at the end of it)
}

Probé las opciones anteriores pero ninguna de ellas me funciona. Aquí esta la solución

if(window.event)
   {
        if(window.event.clientX < 40 && window.event.clientY < 0)
        {
            alert("Browser back button is clicked...");
        }
        else
        {
            alert("Browser refresh button is clicked...");
        }
    }

Consulte este enlace http://www.codeproject.com/Articles/696526/Solution-to-Browser-Back-Button-Click-Event-Handli para obtener más detalles