¿Cómo puedo detectar si un usuario ha llegado a una página utilizando el botón Atrás?

Question 1

Esta pregunta es similar a Rastrear cuando el usuario presiona el botón Atrás en el navegador , pero no es lo mismo ... Tengo una solución y la estoy publicando aquí para referencia y comentarios. Si alguien tiene mejores opciones, ¡soy todo oídos!

La situación es que tengo una página con una "edición en el lugar", a la flickr. Es decir, hay un DIV "haga clic aquí para agregar una descripción", que al hacer clic se convierte en un TEXTAREA con los botones Guardar y Cancelar. Al hacer clic en Guardar, se publican los datos en el servidor para actualizar la base de datos y se coloca la nueva descripción en el DIV en lugar de TEXTAREA. Si se actualiza la página, se muestra la nueva descripción de la base de datos con una opción de "hacer clic para editar". Material web 2.0 bastante estándar en estos días.

El problema es que si:

la página se carga sin la descripción
el usuario agrega una descripción
se navega desde la página haciendo clic en un enlace
el usuario hace clic en el botón Atrás

Luego, lo que se muestra (del caché del navegador) es la versión de la página sin el DIV modificado dinámicamente que contiene la nueva descripción.

Este es un problema bastante grande ya que el usuario asume que su actualización se ha perdido y no necesariamente entenderá que necesita actualizar la página para ver los cambios.

Entonces, la pregunta es: ¿Cómo se puede marcar una página como modificada después de que se ha cargado, y luego detectar cuando el usuario "vuelve a ella" y forzar una actualización en esa situación?

Question 2

Utilice un formulario oculto. Los datos del formulario se conservan (normalmente) en los navegadores cuando recargas o presionas el botón Atrás para regresar a una página. Lo siguiente va en su página (probablemente cerca de la parte inferior):

<form name="ignore_me">
    <input type="hidden" id="page_is_dirty" name="page_is_dirty" value="0" />
</form>

En su javascript, necesitará lo siguiente:

var dirty_bit = document.getElementById('page_is_dirty');
if (dirty_bit.value == '1') window.location.reload();
function mark_page_dirty() {
    dirty_bit.value = '1';
}

El js que rastrea el formulario debe ejecutarse después de que el html se haya analizado por completo, pero puede colocar tanto el formulario como el js en línea en la parte superior de la página (segundo js) si la latencia del usuario es una preocupación seria.

Question 3

Aquí hay una solución moderna muy fácil para este viejo problema.

if (window.performance && window.performance.navigation.type === window.performance.navigation.TYPE_BACK_FORWARD) {
    alert('Got here using the browser "Back" or "Forward" button.');
}

window.performance actualmente es compatible con todos los principales navegadores.

Question 4

Este artículo lo explica. Consulte el código a continuación: http://www.webkit.org/blog/516/webkit-page-cache-ii-the-unload-event/

<html>
    <head>
        <script>

            function pageShown(evt){
                if (evt.persisted) {
                    alert("pageshow event handler called.  The page was just restored from the Page Cache (eg. From the Back button.");
                } else {
                    alert("pageshow event handler called for the initial load.  This is the same as the load event.");
                }
            }

            function pageHidden(evt){
                if (evt.persisted) {
                    alert("pagehide event handler called.  The page was suspended and placed into the Page Cache.");
                } else {
                    alert("pagehide event handler called for page destruction.  This is the same as the unload event.");
                }
            }

            window.addEventListener("pageshow", pageShown, false);
            window.addEventListener("pagehide", pageHidden, false);

        </script>
    </head>
    <body>
        <a href="http://www.webkit.org/">Click for WebKit</a>
    </body>
</html>

Question 5

Para los navegadores modernos, esta parece ser la forma correcta ahora:

const perfEntries = performance.getEntriesByType('navigation');
if (perfEntries.length && perfEntries[0].type === 'back_forward') {
  console.log('User got here from Back or Forward button.');
}

Esto sigue siendo "experimental" a enero de 2020, pero parece tener un buen soporte.

https://developer.mozilla.org/en-US/docs/Web/API/PerformanceNavigationTiming

Question 6

Como se mencionó anteriormente, encontré una solución y la estoy publicando aquí para referencia y comentarios.

La primera etapa de la solución es agregar lo siguiente a la página:

<!-- at the top of the content page -->
<IFRAME id="page_is_fresh" src="fresh.html" style="display:none;"></IFRAME>
<SCRIPT style="text/javascript">
  function reload_stale_page() { location.reload(); }
</SCRIPT>

El contenido de fresh.htmlno es importante, por lo que lo siguiente debería ser suficiente:

<!-- fresh.html -->
<HTML><BODY></BODY></HTML>

Cuando el código del lado del cliente actualiza la página, debe marcar la modificación de la siguiente manera:

function trigger_reload_if_user_clicks_back_button()
{
  // "dis-arm" the reload stale page function so it doesn't fire  
  // until the page is reloaded from the browser's cache
  window.reload_stale_page = function(){};

  // change the IFRAME to point to a page that will reload the 
  // page when it loads
  document.getElementById("page_is_fresh").src = "stale.html";
}

stale.htmlhace todo el trabajo: cuando se carga, llamará a la reload_stale_pagefunción que actualizará la página si es necesario. La primera vez que se carga (es decir, después de realizar la modificación, la reload_stale_pagefunción no hará nada).

<!-- stale.html -->
<HTML><BODY>
<SCRIPT type="text/javascript">window.parent.reload_stale_page();</SCRIPT>
</BODY></HTML>

De mis pruebas (mínimas) en esta etapa, esto parece funcionar como se desea. ¿He pasado por alto algo?

Question 7

Puedes resolverlo usando el evento onbeforeunload :

window.onbeforeunload = function () { }

Expandir fragmento

Tener una función de administrador de eventos vacía onbeforeunload significa que la página se reconstruirá cada vez que se acceda. Los javascripts se volverán a ejecutar, los scripts del lado del servidor se volverán a ejecutar, la página se creará como si el usuario la estuviera presionando por primera vez, incluso si el usuario llegó a la página con solo presionar el botón de retroceso o avance. .

Aquí está el código completo de un ejemplo:

<html>
<head>
<title>onbeforeunload.html</title>
<script>
window.onbeforeunload = function () { }

function myfun()
{
   alert("The page has been refreshed.");
}
</script>

<body onload="myfun()">

Hello World!<br>

</body>
</html>

Expandir fragmento

Pruébelo, navegue fuera de esta página y luego vuelva usando los botones "Atrás" o "Adelante" en su navegador.

Funciona bien en IE, FF y Chrome.

Por supuesto que puedes hacer lo que quieras dentro función myfun .

Más información: http://www.hunlock.com/blogs/Mastering_The_Back_Button_With_Javascript

Question 8

Puede usar localStorage o sessionStorage ( http://www.w3schools.com/html/html5_webstorage.asp ) para establecer una bandera (en lugar de usar un formulario oculto).

Question 9

Usando esta página, especialmente incorporando el comentario de @sajith sobre la respuesta de @Nick White y esta página: http://www.mrc-productivity.com/techblog/?p=1235

<form name="ignore_me" style="display:none">
    <input type="text" id="reloadValue" name="reloadValue" value="" />
</form>

$(function ()
{
    var date = new Date();
    var time = date.getTime();

    if ($("#reloadValue").val().length === 0)
    {
        $("#reloadValue").val(time);
    }
    else
    {
        $("#reloadValue").val("");
        window.location.reload();
    }
});

Question 10

Aquí hay una versión de jQuery. Me he encontrado con la necesidad de usarlo varias veces debido a la forma en que Safari para escritorio / móvil maneja el caché cuando un usuario presiona el botón Atrás.

$(window).bind("pageshow", function(event) {
    if (event.originalEvent.persisted) {
        // Loading from cache
    }
});

Question 11

Hoy me encontré con un problema similar y lo resolví con localStorage (aquí con un poco de jQuery):

$(function() {

    if ($('#page1').length) {
        // this code must only run on page 1

        var checkSteps = function () {
            if (localStorage.getItem('steps') == 'step2') {
                // if we are here, we know that:
                // 1. the user is on page 1
                // 2. he has been on page 2
                // 3. this function is running, which means the user has submitted the form
                // 4. but steps == step2, which is impossible if the user has *just* submitted the form
                // therefore we know that he has come back, probably using the back button of his browser
                alert('oh hey, welcome back!');
            } else {
                setTimeout(checkSteps, 100);
            }
        };

        $('#form').on('submit', function (e) {
            e.preventDefault();
            localStorage.setItem('steps', 'step1'); // if "step1", then we know the user has submitted the form
            checkOrderSteps();
            // ... then do what you need to submit the form and load page 2
        });
    }

    if ($('#page2').length) {
        // this code must only run on page 2
        localStorage.setItem('steps', 'step2');
    }

});

Si básicamente:

En la página 1, cuando el usuario envía el formulario, establecemos un valor "pasos" en localStorage para indicar qué paso ha dado el usuario. Al mismo tiempo, lanzamos una función con timeout que comprobará si este valor ha sido modificado (por ejemplo, 10 veces / segundo).

En la página 2, cambiamos inmediatamente dicho valor.

Entonces, si el usuario usa el botón Atrás y el navegador restaura la página 1 en el estado exacto en que la dejamos, la función checkSteps aún se está ejecutando y es capaz de detectar que el valor en localStorage ha cambiado (y puede tomar la acción apropiada ). Una vez que esta verificación ha cumplido su propósito, no es necesario seguir ejecutándola, por lo que simplemente ya no usamos setTimeout.