javascript - replacestate - Cómo verificar si el usuario puede volver atrás en el historial del navegador o no

pushstate w3schools

Question

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.

Answer 1

Así es como lo hice.

Usé el evento ''beforeunload'' para establecer un booleano. Luego establecí un tiempo de espera para ver si se disparaba la ''descarga previa''.

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 FF, Chrome, IE11 hasta el momento).

Answer 2

Compruebe si window.history.length es igual a 0.

Answer 3

Hay otra manera de verificar: verificar el referente. La primera página generalmente tendrá una referencia vacía ...

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

Answer 4

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 al usar target="_blank" pero parece funcionar para mí en Chrome.

Answer 5

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: uso History.js para administrar el historial del navegador.

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

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

Hay pocas posibilidades de history.length y el comportamiento del usuario:

• El usuario abre una nueva pestaña vacía en el navegador y luego ejecuta una página. history.length = 2 y queremos desactivar 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 = 1 y nuevamente queremos deshabilitar el método back() .
• Y finalmente, el usuario aterriza en la página actual después de volver a cargar algunas páginas . history.length > 2 y ahora de back() se pueden habilitar.

Nota: omito 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 abres el sitio web escribiendo su dirección y también cuando el sitio web usa ajax para cargar subpáginas, por lo que dejé de verificar este valor en el primer caso.

Answer 6

Mi código permite que el navegador regrese una página, y si eso falla, carga una url de reserva. También detecta cambios de 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. Cargando la URL de reserva justo después de window.history.go(-1); provocaría que el navegador utilizara la URL de respaldo, porque el script js no se detuvo aún.

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);
}

Answer 7

No estoy seguro de si esto funciona y no está probado, pero prueba 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 soportan la función de respaldo (creo que todos lo hacen) y usar el objeto de detección del navegador de JavaScript estándar que se encuentra, y que se describe detalladamente, en esta página . Luego puede tener 2 páginas diferentes: una para los "buenos navegadores" compatibles con el botón Atrás y otra para los "malos navegadores" que les dice que vayan a actualizar su navegador

Answer 8

No se puede verificar directamente si el botón Atrás es utilizable. Puede ver history.length>0 , pero eso será cierto si también hay páginas delante de la página actual. 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 a history.back() y, si su página aún se carga después, ¡el botón Atrás no estará disponible! Por supuesto, eso significa que si el botón Atrás está disponible, simplemente ha navegado fuera de la página. No tiene permiso para cancelar la navegación en onunload , por lo que lo único que puede hacer para evitar que la parte posterior ocurra es devolver algo antes de la onbeforeunload , lo que provocará la aparición de un gran aviso molesto. Que no vale la pena.

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

Answer 9

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 la seguridad y generalmente solo devuelve indefinido .

history.length

Es una propiedad que otros han sugerido ...
Sin embargo , la longitud no funciona completamente porque no indica en qué parte del historial se encuentra. Además, no siempre comienza en el mismo número. Un navegador no configurado para tener una página de inicio, por ejemplo, comienza en 0 mientras que otro navegador que usa una página de etiquetado 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 puede regresar, hacer clic en el enlace no hace nada.

Answer 10

Se me ocurrió el siguiente enfoque. Utiliza el evento onbeforeunload para detectar si el navegador comienza a salir de la página o no. Si no lo hace en un intervalo de tiempo determinado, se redireccionará 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") .

Answer 11

Tenga cuidado con window.history.length porque incluye también entradas para window.history.forward()

Por lo tanto, es posible que tengas window.history.length con más de 1 entrada, pero sin historial de entradas atrás. Esto significa que no pasa nada si dispara window.history.back()

Answer 12

el navegador tiene el botón Atrás y Adelante. Vengo una solución en esta pregunta. pero afectará la acción de avance del navegador y provocará errores en algunos navegadores.

Funciona de esa manera: si el navegador abre una url nueva, que nunca se abrió, la history.length crecerá.

para que puedas cambiar hash como

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

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

  var realHistoryLength = history.length - 1

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

Answer 13

history.length es inútil ya que no muestra si el usuario puede volver atrás en la historia. Además, los diferentes navegadores usan los valores iniciales 0 o 1: depende del navegador.

La solución de trabajo es usar $(window).on(''beforeunload'' evento $(window).on(''beforeunload'' , pero no estoy seguro de que funcione 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);

Answer 14

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 a history.back () y luego a window.close (). Si el navegador puede retroceder en la historia, no podrá acceder a la siguiente declaración. Si no puede regresar, cerrará la ventana.

Sin embargo, tenga en cuenta que si se llegó a la página escribiendo una url, entonces Firefox no permitirá que la secuencia de comandos cierre la ventana.

Answer 15

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