Cómo verificar si el usuario puede volver al historial del navegador o no

Quiero usar JavaScript para ver si hay historial o no, quiero decir si el botón Atrás está disponible en el navegador o no.

Respuesta corta: no puedes.

Técnicamente hay una forma precisa, que sería verificar la propiedad:

history.previous

Sin embargo, no funcionará. El problema con esto es que en la mayoría de los navegadores esto se considera una violación de seguridad y generalmente solo regresa indefinido .

history.length

Es una propiedad que otros han sugerido ...
Sin embargo , la longitud no funciona por completo, ya que no indica donde en la historia que eres. Además, no siempre comienza en el mismo número. Un navegador que no está configurado para tener una página de destino, por ejemplo, comienza en 0, mientras que otro navegador que usa una página de inicio comenzará en 1.

La mayoría de las veces se agrega un enlace que llama:

history.back();

o

 history.go(-1);

y solo se espera que si no puedes regresar, hacer clic en el enlace no haga nada.

Hay otra forma de verificar: verificar el referente. La primera página generalmente tendrá un referente vacío ...

if (document.referrer == "") {
    window.close()
} else {
    history.back()
}

Mi código permite que el navegador retroceda una página, y si eso falla, carga una URL de reserva. También detecta cambios en los hashtags.

Cuando el botón Atrás no estaba disponible, la URL de reserva se cargará después de 500 ms, por lo que el navegador tiene tiempo suficiente para cargar la página anterior. Si carga la URL de reserva inmediatamente después window.history.go(-1);, el navegador usará la URL de reserva, porque el script js aún no se detuvo.

function historyBackWFallback(fallbackUrl) {
    fallbackUrl = fallbackUrl || '/';
    var prevPage = window.location.href;

    window.history.go(-1);

    setTimeout(function(){ 
        if (window.location.href == prevPage) {
            window.location.href = fallbackUrl; 
        }
    }, 500);
}

Así es como lo hice.

He utilizado el evento 'beforeunload' para establecer un valor lógico. Luego establecí un tiempo de espera para ver si se disparaba el 'beforeunload'.

var $window = $(window),
    $trigger = $('.select_your_link'),
    fallback = 'your_fallback_url';
    hasHistory = false;

$window.on('beforeunload', function(){
    hasHistory = true;
});

$trigger.on('click', function(){

    window.history.go(-1);

    setTimeout(function(){
        if (!hasHistory){
            window.location.href = fallback;
        }
    }, 200);

    return false;
});

Parece funcionar en los principales navegadores (probado hasta ahora FF, Chrome, IE11).

Hay un fragmento que uso en mis proyectos:

function back(url) {
    if (history.length > 2) {
        // if history is not empty, go back:
        window.History.back();
    } else if (url) {
        // go to specified fallback url:
        window.History.replaceState(null, null, url);
    } else {
        // go home:
        window.History.replaceState(null, null, '/');
    }
}

FYI: Yo uso History.js para administrar el historial del navegador.

¿Por qué comparar history.length con el número 2?

Porque la página de inicio de Chrome se cuenta como el primer elemento en el historial del navegador.

Hay pocas posibilidades history.lengthy comportamiento del usuario:

• El usuario abre una nueva pestaña vacía en el navegador y luego ejecuta una página. history.length = 2y queremos deshabilitar back()en este caso, porque el usuario irá a la pestaña vacía.
• El usuario abre la página en una nueva pestaña haciendo clic en un enlace en algún lugar antes. history.length = 1y nuevamente queremos deshabilitar el back()método.
• Y finalmente, el usuario llega a la página actual después de volver a cargar algunas páginas . history.length > 2y ahora back()se puede habilitar.

Nota: omito el caso cuando el usuario aterriza en la página actual después de hacer clic en el enlace del sitio web externo sin target="_blank".

Nota 2: document.referrer está vacío cuando abre el sitio web escribiendo su dirección y también cuando el sitio web utiliza ajax para cargar subpáginas, por lo que dejé de verificar este valor en el primer caso.

Esto parece hacer el truco:

function goBackOrClose() {  

    window.history.back();
    window.close(); 

    //or if you are not interested in closing the window, do something else here
    //e.g. 
    theBrowserCantGoBack();

}

Llame history.back () y luego window.close (). Si el navegador puede retroceder en el historial, no podrá acceder a la siguiente declaración. Si no puede regresar, cerrará la ventana.

Sin embargo, tenga en cuenta que si se ha llegado a la página escribiendo una URL, Firefox no permitirá que el script cierre la ventana.

Tenga cuidado window.history.lengthporque incluye también entradas parawindow.history.forward()

Por lo tanto, es posible que tenga window.history.lengthmás de 1 entradas, pero no entradas de historial. Esto significa que no pasa nada si disparaswindow.history.back()

No puede verificar directamente si el botón Atrás es utilizable. Puede mirar history.length>0, pero eso será válido si hay páginas delante de la página actual también. Solo puede estar seguro de que el botón Atrás no se puede usar cuando history.length===0.

Si eso no es lo suficientemente bueno, todo lo que puede hacer es llamar history.back()y, si su página aún se carga después, ¡el botón de retroceso no está disponible! Por supuesto, eso significa que si el botón Atrás está disponible, acaba de salir de la página. No se le permite cancelar la navegación onunload, por lo que todo lo que puede hacer para evitar que la parte posterior realmente ocurra es devolver algo onbeforeunload, lo que resultará en un gran mensaje molesto. Que no vale la pena.

De hecho, normalmente es una muy mala idea hacer algo con la historia. La navegación del historial es para el navegador Chrome, no para las páginas web. Agregar enlaces de "retroceso" generalmente causa más confusión al usuario de lo que vale.

history.lengthes inútil ya que no muestra si el usuario puede volver al historial. Además, diferentes navegadores usan valores iniciales 0 o 1; depende del navegador.

La solución de trabajo es usar el $(window).on('beforeunload'evento, pero no estoy seguro de que funcionará si la página se carga a través de ajax y usa pushState para cambiar el historial de la ventana.

Así que he usado la siguiente solución:

var currentUrl = window.location.href;
window.history.back();
setTimeout(function(){
    // if location was not changed in 100 ms, then there is no history back
    if(currentUrl === window.location.href){
        // redirect to site root
        window.location.href = '/';
    }
}, 100);

Se me ocurrió el siguiente enfoque. Utiliza el evento onbeforeunload para detectar si el navegador comienza a abandonar la página o no. Si no lo hace en un período de tiempo determinado, simplemente se redirigirá a la reserva.

var goBack = function goBack(fallback){
    var useFallback = true;

    window.addEventListener("beforeunload", function(){
      useFallback = false;
    });

    window.history.back();

    setTimeout(function(){
        if (useFallback){ window.location.href = fallback; }
    }, 100); 
}

Puede llamar a esta función usando goBack("fallback.example.org").

Sobre la base de la respuesta aquí y aquí . Creo que la respuesta más concluyente es verificar si se trata de una página nueva en una pestaña nueva.

Si el historial de la página es más de uno, entonces podemos volver a la página anterior a la página actual. De lo contrario, la pestaña es una pestaña recién abierta y necesitamos crear una nueva pestaña.

De manera diferente, a las respuestas vinculadas, no estamos verificando una, referrerya que una nueva pestaña todavía tendrá un referente.

if(1 < history.length) {
    history.back();
}
else {
    window.close();
}

Hay otra solución casi perfecta, tomada de otra respuesta SO :

if( (1 < history.length) && document.referrer ) {
    history.back();
}
else {
    // If you can't go back in history, you could perhaps close the window ?
    window.close();
}

Alguien informó que no funciona cuando se usa, target="_blank"pero parece funcionar para mí en Chrome.

el navegador tiene botón de retroceso y avance. Se me ocurre una solución a esta pregunta. pero afectará la acción de avance del navegador y causará errores con algunos navegadores.

Funciona así: si el navegador abre una nueva url, que nunca se ha abierto, la longitud de la historia crecerá.

para que puedas cambiar hash como

  location.href = '#__transfer__' + new Date().getTime() 

para obtener una URL nunca mostrada, entonces history.length obtendrá la longitud verdadera.

  var realHistoryLength = history.length - 1

pero, no siempre funciona bien, y no sé por qué, especialmente cuando el url automático salta rápidamente.

Estaba tratando de encontrar una solución y esto es lo mejor que pude obtener (pero funciona muy bien y es la solución más fácil que he encontrado incluso aquí).

En mi caso, quería volver al historial con un botón de retroceso, pero si la primera página que el usuario abrió era una subpágina de mi aplicación, volvería a la página principal.

La solución fue que, tan pronto como se cargó la aplicación, acabo de reemplazar el estado del historial:

history.replaceState( {root: true}, '', window.location.pathname + window.location.hash)

De esta manera, solo necesito verificar history.state.rootantes de volver. Si es cierto, hago un reemplazo de historial en su lugar:

if(history.state && history.state.root)
    history.replaceState( {root: true}, '', '/')
else
    history.back() 

var fallbackUrl = "home.php";
if(history.back() === undefined)
    window.location.href = fallbackUrl;

Solución

'use strict';
function previousPage() {
  if (window.location.pathname.split('/').filter(({ length }) => length > 0).length > 0) {
    window.history.back();
  }
}

Explicación

window.location.pathnamele dará el URI actual. Por ejemplo https://domain/question/1234/i-have-a-problemdará /question/1234/i-have-a-problem. Consulte la documentación sobre window.location para obtener más información.

Luego, la llamada a split()nos dará todos los fragmentos de ese URI. así que si tomamos nuestro URI anterior, tendremos algo así ["", "question", "1234", "i-have-a-problem"]. Consulte la documentación sobre String.prototype.split () para obtener más información.

La llamada a filter()está aquí para filtrar la cadena vacía generada por la barra diagonal inversa. Básicamente, solo devolverá el URI del fragmento que tenga una longitud mayor que 1 (cadena no vacía). Entonces tendríamos algo así ["question", "1234", "i-have-a-question"]. Esto podría haberse escrito así:

'use strict';
window.location.pathname.split('/').filter(function(fragment) {
  return fragment.length > 0;
});

Consulte la documentación sobre Array.prototype.filter () y la asignación Destructuring para obtener más información.

Ahora, si el usuario intenta regresar mientras está encendido https://domain/, no activaremos la instrucción if, y no activaremos el window.history.back()método para que el usuario permanezca en nuestro sitio web. Esta URL será equivalente a la []que tiene una longitud de 0, y 0 > 0es falsa. Por lo tanto, silenciosamente fallando. Por supuesto, puede registrar algo o tener otra acción si lo desea.

'use strict';
function previousPage() {
  if (window.location.pathname.split('/').filter(({ length }) => length > 0).length > 0) {
    window.history.back();
  } else {
    alert('You cannot go back any further...');
  }
}

Limitaciones

Por supuesto, esta solución no funcionará si el navegador no es compatible con la API de historial . Consulte la documentación para obtener más información antes de usar esta solución.

No estoy seguro de si esto funciona y no está completamente probado, pero intente esto:

<script type="text/javascript">

    function goBack() {
        history.back();
    }

    if (history.length > 0) { //if there is a history...
        document.getElementsByTagName('button')[].onclick="goBack()"; //assign function "goBack()" to all buttons onClick
    } else {
        die();
    }
</script>

Y en algún lugar en HTML:

<button value="Button1"> //These buttons have no action
<button value="Button2">

EDITAR:

Lo que también puede hacer es investigar qué navegadores admiten la función de retroceso (creo que todos lo hacen) y usar el objeto de detección de navegador JavaScript estándar que se encuentra y se describe a fondo en esta página . Luego puede tener 2 páginas diferentes: una para los "buenos navegadores" compatibles con el botón de retroceso y otra para los "malos navegadores" que les dice que actualicen su navegador

Verifique si window.history.lengthes igual a 0.