Skip to main content
correções no código
Fonte Link
Lauro Moraes
  • 4mil
  • 4
  • 28
  • 47
  • o "rooteamento" será disparado no evento click

    o "rooteamento" será disparado no evento click
  • a "rota" será um valor no atributo data-value="" no botão

    a "rota" será um valor no atributo data-value="" no botão
  • um "contêiner" irá servir para mostrar o conteúdo carregado

      <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>
      $('.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>
    
    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.

  • 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

      <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>
      $('.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>
    
  • 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.

Fonte Link
Lauro Moraes
  • 4mil
  • 4
  • 28
  • 47

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

      <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>
      $('.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>