Como posso detectar se um usuário chegou a uma página usando o botão Voltar?

Esta questão é semelhante a Rastrear quando o usuário pressiona o botão Voltar no navegador , mas não é o mesmo ... Tenho uma solução e a estou postando aqui para referência e feedback. Se alguém tiver opções melhores, sou todo ouvidos!

A situação é que tenho uma página com uma "edição no local", a la flickr. Ou seja, há um DIV "clique aqui para adicionar uma descrição", que quando clicado se transforma em uma TEXTAREA com os botões Salvar e Cancelar. Clicar em Salvar envia os dados para o servidor para atualizar o banco de dados e coloca a nova descrição no DIV no lugar de TEXTAREA. Se a página for atualizada, a nova descrição será exibida no banco de dados com uma opção "clique para editar". Coisas razoavelmente normais da Web 2.0 atualmente.

O problema é que se:

1. a página é carregada sem a descrição
2. uma descrição é adicionada pelo usuário
3. a página é navegada para fora clicando em um link
4. o usuário clica no botão Voltar

Então, o que é exibido (do cache do navegador) é a versão da página sem o DIV modificado dinamicamente contendo a nova descrição.

Este é um problema bastante grande, pois o usuário presume que sua atualização foi perdida e não necessariamente entenderá que precisa atualizar a página para ver as mudanças.

Portanto, a pergunta é: como você pode sinalizar uma página como modificada após ser carregada e, em seguida, detectar quando o usuário "volta para ela" e forçar uma atualização nessa situação?

Use um formulário oculto. Os dados do formulário são preservados (normalmente) nos navegadores quando você recarrega ou clica no botão Voltar para retornar a uma página. O seguinte vai para sua página (provavelmente perto do final):

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

No seu javascript, você precisará do seguinte:

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

O js que fareja o formulário deve ser executado depois que o html é totalmente analisado, mas você pode colocar o formulário e o js embutidos no topo da página (segundo js) se a latência do usuário for uma preocupação séria.

Aqui está uma solução moderna muito fácil para esse velho 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 é atualmente suportado por todos os principais navegadores.

Este artigo explica isso. Veja o código abaixo: 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>

Para navegadores modernos, este parece ser o caminho certo agora:

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

Ainda é "Experimental" em janeiro de 2020, mas parece ter um bom suporte.

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

Conforme mencionado acima, eu encontrei uma solução e a estou postando aqui para referência e feedback.

O primeiro estágio da solução é adicionar o seguinte à 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>

O conteúdo de fresh.htmlnão é importante, então o seguinte deve ser suficiente:

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

Quando o código do lado do cliente atualiza a página, ele precisa sinalizar a modificação da seguinte maneira:

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.htmlfaz todo o trabalho: Quando é carregado, ele chamará a reload_stale_pagefunção que atualizará a página se necessário. Na primeira vez que é carregado (ou seja, após a modificação ser feita, a reload_stale_pagefunção não fará nada.)

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

Pelo meu teste (mínimo) neste estágio, isso parece funcionar como desejado. Eu esqueci alguma coisa?

Você pode resolvê-lo usando o evento onbeforeunload :

window.onbeforeunload = function () { }

Ter uma função de gerenciador de eventos vazio onbeforeunload significa que a página será reconstruída toda vez que for acessada. Javascripts serão executados novamente, scripts do lado do servidor serão executados novamente, a página será construída como se o usuário estivesse acessando-a pela primeira vez, mesmo se o usuário acessou a página apenas pressionando o botão Voltar ou Avançar .

Aqui está o código completo de um exemplo:

<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>

Experimente, navegue para fora desta página e volte usando os botões "Voltar" ou "Avançar" em seu navegador.

Funciona bem no IE, FF e Chrome.

Claro que você pode fazer o que quiser dentro da função myfun .

Mais informações: http://www.hunlock.com/blogs/Mastering_The_Back_Button_With_Javascript

Você pode usar localStorage ou sessionStorage ( http://www.w3schools.com/html/html5_webstorage.asp ) para definir um sinalizador (em vez de usar um formulário oculto).

Usando esta página, especialmente incorporando o comentário de @sajith sobre a resposta de @Nick White e 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();
    }
});

Aqui está uma versão do jQuery. Já tive a necessidade de usá-lo algumas vezes devido à maneira como o Safari para desktop / celular lida com o cache quando um usuário pressiona o botão Voltar.

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

Eu encontrei um problema semelhante hoje e resolvi com localStorage (aqui com um pouco 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 basicamente:

Na página 1, quando o usuário envia o formulário, definimos um valor "etapas" em localStorage para indicar a etapa que o usuário realizou. Ao mesmo tempo, lançamos uma função com timeout que irá verificar se este valor foi alterado (por exemplo, 10 vezes / segundo).

Na página 2, alteramos imediatamente o referido valor.

Portanto, se o usuário usar o botão Voltar e o navegador restaurar a página 1 no estado exato em que a deixamos, a função checkSteps ainda está em execução e é capaz de detectar que o valor em localStorage foi alterado (e pode tomar a ação apropriada ) Uma vez que essa verificação tenha cumprido seu propósito, não há necessidade de continuar a executá-la, então simplesmente não usamos mais setTimeout.