0

Olá,

Alguém sabe como posso usar o voltar do navegador com algum recurso ajax/jquery, considerando que a url está limpa?

  • Por exemplo, ao navegar cria-se uma sessão php, dessa forma quando navego entre a pagina1, pagina2 e 3, a url continua limpa, ex: http://sistema.com.br/

  • Quando estou na pagina2, quero usar o voltar do navegador, retornado para1, e continuar com a url limpa...

19
  • Quando você diz: "navegar entre as paginas 1,2 e 3" esta querendo dizer que busca estas páginas "dinamicamente"? Se for isto, não havendo histórico de navegação no site não há como voltar...afinal de contas para onde voltaria já que não foi a lugar algum? Commented 6/04/2018 às 12:24
  • Busco de forma dinamica, e crio uma sessão no navegador, então me refiro em utilizar essa sessão para atribuir ao voltar.
    – Neo
    Commented 6/04/2018 às 12:32
  • Como você vai usar a sessão para voltar? Quando fala sessão, que tipo em que linguagem exatamente (PHP?)? Commented 6/04/2018 às 12:35
  • Sim, com php. Digamos que guardo uma string na sessão, como 'pagina1', então gostaria de saber algum comando com jquery, para que possa fazer o .load() da pagina, ao executar o voltar do navegador, com essa string.
    – Neo
    Commented 6/04/2018 às 12:42
  • 1
    @Neo além do ElectronJS citado pelo @GuilhermeNascimento, você também pode estudar um pouco sobre PWA. Além do mais, este seu requisito, me parece muito com um SPA. Talvez uma ferramenta que venha a lhe ajudar, seja o Quasar Framework, seja PWA ou ElectronJS Commented 6/04/2018 às 14:09

2 Respostas 2

1

você terá que adicionar algum state ao history, você irá recuperar ele no evento popstate

o exemplo abaixo irá adicionar o valor do input como um state no history. caso navegue, o valor do input será atualizado com o valor presente no history.

var text = document.getElementById("text");
var add = document.getElementById("add");
add.addEventListener("click", function () {
  history.pushState(text.value, document.title, "/");
})

window.addEventListener("popstate", function(evt){
  text.value = evt.state
});
<input id="text" type="text" />
<input id="add" type="button" value="Adicionar" />

O exemplo não funciona aqui no SO, mas pode ser visto no JSFiddle

EDIT

Já que você precisa de mais jquery...

var text = $("#text");
var add = $("#add");
add.on("click", function () {
  history.pushState(text.val(), document.title, "/");
})

$(window).on("popstate", function(evt){
  text.val(evt.state);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="text" type="text" />
<input id="add" type="button" value="Adicionar" />

YOU MIGHT NOT NEED JQUERY

3
  • Visualizei o fiddle, percebi que a cada adicionar, um novo item no historico foi adicionado. Agora como faço para resgatar esse valor adicionado e utilizar para que o voltar seja relacionada a tela anterior?
    – Neo
    Commented 6/04/2018 às 13:12
  • Você conseguiria traduzir aquele codigo para o formato jquery?
    – Neo
    Commented 6/04/2018 às 13:12
  • 1
    @Neo na navegação você deve adicionar informações ao state que identifique aquela pagina. quando o usuario vir a navegar, o evento popstate será executado e o respectivo state, então você deve recriar a pagina apartir dele. Commented 6/04/2018 às 13:28
1

Já que você esta carregando estas páginas dinamicamente o correto seria usar a History API e salvar este "novo estado".

Como você não postou nenhum código de como irá gerenciar as chamadas (.load()) este exemplo assume que:

  • o "rooteamento" será disparado no evento click
  • a "rota" será um valor no atributo data-value="" no botão
  • um "contêiner" irá servir para mostrar o conteúdo carregado
  • ao retornar ao estado padrão do histórico (null) o contêiner é limpo

EXEMPLO

<body>
<div id="container"></div>
<button type="button" data-value="pagina1.html" class="navigate">Carregar pagina1.html</button>
<button type="button" data-value="pagina2.html" class="navigate">Carregar pagina2.html</button>
<button type="button" data-value="pagina3.html" class="navigate">Carregar pagina3.html</button>

<script src="path/to/jequery.js"></script>
<script>
    $('.navigate ').on('click', function() {
        let target = $(this).attr('data-value')
        $('#container').load(target, function() {
            history.pushState(target, "", "/")
        })
    })
    window.addEventListener("popstate", function(evt) {
        if ( evt.state ) {
            $('#container').load(evt.state)
        } else {
            $('#container').html('')
        }
    }, false)
</script>
</body>

Nas páginas um simples <h1> indicando em qual página esta...você poderá navegar no histórico a "frente" e de "volta".

O estado inicial do histórico é null, ao chegar no estado inicial (caso de retornar) apenas exiba sua interface padrão.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .