window.history.pushState javascript – trocando a URL usando api html5 em páginas carregadas com ajax

Bem simples, só editei o trecho que era necessário para enviar um history.pushState, no final da requisição ajax, que carrega a página em uma div, sem dar refresh no restante do site.

http://wbruno.com.br/2011/05/27/navegacao-sem-refresh-%E2%80%93-carregando-conteudo-ajax-em-div-2

$.ajax({
	url: href,
	success: function( response ){
		//forçando o parser
		var response = $( '<div>'+response+'</div>' );
				
		var data = response.find('#content').html();

		//apenas atrasando a troca, para mostrarmos o loading
		window.setTimeout( function(){
			content.fadeOut('slow', function(){
				content.html( data ).fadeIn();
							
				var title = response.find('title').text();
				window.history.pushState( href, title, href );
				document.title = title;
			});
		}, 500 );
	}
});

Notem a linha:

window.history.pushState( href, response.find('title'), href );

É essa nova função que veio junto com o HTML5, que faz toda a mágica.
Browsers antigos não implementam esse método.

Agora podemos parar de forçar a barra usando o document.location.hash, como nessa implementação aqui:
http://wbruno.com.br/2011/11/25/carregando-conteudo-ajax-trocando-url-jquery/

Demonstração

É isso. Dúvidas ? pergunte, comente!

37 Comments

  1. Olá, bom tutorial! mas, poderia esplicar algumas coisinhas por favor:
    caso o usuário copie a url, e envie para outro usuário, como eu poderia indentificar que é para a x página e com o y conteúdo carregado quando este outro usuário acessasse a URL?
    obrigado, até breve.

    • Oi Bruno,
      No caso, vc não precisa verificar nada do seu lado. Note que estou trabalhando com a URL real, a mesma que seria chamada, caso o navegador do cara não tivesse suporte a javascript.

      Simplesmente aperte F5 num link interno da demonstração, e vc irá entender.
      []s!

  2. POoooooo esse ae ta 100% agora =DD

    infelizmente o só funfa com html5. Não sei se vale a pena implementar esse código atualmente.

    tem como eu verificar se o browser suporta html5? ae caso suporte faça uma ação, caso contrário faça outra?

    q ae eu poderia usar o hash para browsers antigos.

    desde já agradeço! =DD

  3. Bem já descubri como que faz
    é so jogar num if. mais simples do que eu imaginava.

    if(window.history.pushState) {
        // comando caso funcione
    } else {
        // comando caso não funcione
    }

    show agora irei implementar para usar hash caso não funcione e caso funcione usar o pushState =DD

    desde já agradeço!

    • Opa!
      Parabéns Renato !
      E obrigado por ter voltado e compartilhado conhecimento também.

      Eu ainda não tinha tido tempo de ler seu pedido.
      []s!

  4. teria como vc disponibilizar os arquivos em html para download?
    gostei muito do script, quero implementar em meu site mais estou com uma dúvida que se eu tivesse os arquivos originais provavelmente não teria.

    vou tentar explicar minha dúvida.
    no meu site eu uso um arquivo .htaccess que sempre redireciona para index.php
    e de acordo com o que se escrever na url carrega um determinado conteúdo.

    nesse caso eu até consegui fazer, porém quando eu chamo uma requisição em ajax, a página do ajax cai no .htaccess e chama novamente a página toda.
    fiz uma exeção em .htacces para essa página. Só que ae o problema muda

    se eu der um f5 por exemplo, a página só carrega o conteúdo. e a div com o menu não aparece.

    gostaria que você colocasse disponível os arquivos para eu analizar e conseguir tirar minha dúvida.

    agradeço desde já.

    • Oi Jdinix, nesse caso indico vc tirar a excessão que vc fez no htaccess, e usar o parser de HTML do jQuery.
      Da forma que eu mostro aqui:

      $("#content").load( href +" #content"); 

      ou:

      var data = $( '<div>'+response+'</div>' ).find('#content').html(); 

      Posso providenciar o download sim, mas vc também consegue pegar o código completo, pelo link da demonstração.

      []s!

  5. Olá …
    Queria saber se nesse template que estou usando no WordPress [ http://www.pentaculus.com.br ], essa solução que você criou tem funcionalidade …
    []s

  6. Meu problema é codificar o JS hehehehe Sou bem leigo em AJAX … Obrigado 🙂

  7. Aprendendo muito aqui!

    Obrigado por compartilhar.

    Ótimos artigos!

    Abraço

  8. Vlw Bruno!!!

    Vc salvou minha vida… 😀

    abraço

  9. Ricardo Peres

    abril 13, 2012 at 13:48

    Obrigado por compartilhar, este post me ajudou mtooo!!!

    Mas estou com um problema, dentro de #content na página index.html tenho um slide de imagens e, toda vez que retorno a index.html as imagens não são carregadas.

    Pode me ajudar?

  10. Olá Bruno, muito bom seu tutorial. Preciso fazer isto funcionar e outras coisas (como o voltar) e esta parte funcionou QUASE que perfeitamente. Digo quase, pois não funcionou o esquema de mudar a URL (pushState) na porcaria do IE 9.0.8112.

    Poderia me dar uma luz de como resolver isto ? Procurei alguns exemplos utilizando o tal do document.location.hash, mas não achei nada palpável.

    desde já, obrigado!

  11. Fala Bruno, só passei para dar os parabéns.
    Esta sendo muito útil o código cara!

  12. Bruno, MUITO útil esse código, mas percebi um detalhe: ao tentar voltar à página anterior, via setas, a página não recarrega. Testei via Chrome e Firefox.

  13. Tambem estou com mesmo problema de muitos , sempre que volto para página anterior á página não recarrega com jquery.
    Alguem ajuda ?

    Em relação aos que muitos dizem , algumas pessoas já falaram que não funciona no IE 7,8 e 9 , então como o amigo falou pode ser criado um IF.

    Segue CODE : http://pastebin.com/djRxJdba

  14. Matheus Antunes

    dezembro 23, 2012 at 19:54

    Buenas! Trazendo a tona o tópico…..

    Seguinte to com um probleminha, já procurei por todos os lados, mas não consegui arrumar.
    Consigo navegar a pagina toda, aperto F5 e sem problema.
    No entanto, ao apertar no botão “Voltar” do Browser, a URL MUDA mas NÃO CARREGA a pagina anterior.
    Quem quiser analisar ( ” http://www.mathweb.com.br/clientes/aserp “).

    Já tentei capturar eventos do navegador (hahahaha…) mas sem sucesso.
    até um script que criei que fica testando se a URL não muda ( se mudar dá refresh )..

    No aguardo… Igual aos colegas acima…

  15. Olá neste caso só vai recarregar onde tem a div #content por exemplo
    menu fica aqui

    no caso so vai recarregar a div principal e os menus não recarrega ?

  16. então como eu faço para atribuir a função a um botão, e por onclick e também tem alguma atribuição para a velocidade da exibição dos itens ?

  17. Ótimo tutorial Bruno, me ajudou bastante. Parabéns. 😀

  18. Diego Ferreira

    junho 26, 2013 at 07:50

    Funcionaria com PHP include??

  19. Cara, recuperar os dados com json é a melhor forma para trabalhar com pushstate, dessa forma que vc postou vc recupera muita informação que não vai utilizar, perde tempo para encontrar o q quer utilizando find no objeto, e alguns dados não podems er encontrados utilizando find, exemplo: vc n consegue recuperar o titulo com esse trecho de codigo em algumas ocasioes … var title = response.find(‘title’).text();

  20. Galera estou com uma duvida no meu site quando atualizo a pagina simplemente o menu some ficando so o conteudo da pagina exemplo(pagina contato.php)

  21. Olá.venho através desse contato pedir ajuda.Tenho um projeto que implementei esse código para carregar as paginas dinamicamente com ajax, só que o problema é que não carrega outros Plugins ou seja algumas coisas ficam sem funcionar. Tipo na pagina principal o carrocel com as imagens ficam sem funcionar quando acesso uma pagina e volto para a pagina principal onde se encontra o carrocel. O outro problema que mais gostaria de resolver é na pagina do artista onde se encontra a listagem das musicas pois queria que o usuário ao escolher as musicas que gostaria de ouvir continuasse navegando no site sem parar de tocar as musicas no player ou se ele fosse em um outro artista pudesse escolher outras musicas e adicionar ao player. O problema é ai pois os botoes de play e adicionar ao player perdem a funcionalidade.o código necessário não foi carregado para poder funcionar.só volta a funcionar se atualizara pagina onde estar mais ai as musicas que estão no player saem.O que pode ser feito em relação a esse problema.como faço para que todas as funções sejam carregadas. Quem poder me ajudar agradeço. o site é http://somgospelmp3.com/

  22. Nesse caso acontece quando é carregado a primeira vez tudo funciona, todos os js foram executados e aplicados como binds com clicks, carrossel e etc.

    Quando você utiliza o pushState, você está só retornando o html que veio do ajax, para resolver é preciso fazer todas as chamadas de plugins e binds novamente.

    Melhor eh criar uma função que aplica todos os binds e plugins, e chama-lo quando iniciar a primeira vez e todos os retornos de pushStat.

    abs

  23. Desta forma poderia fixar uma div no rodapé, sem dar refresh. Preciso deixar uma div com um player de audio e a cada link que navegar não quero regarregar o player para não perder o audio. Poderia usar desta forma?

  24. Olá Bruno.Os links demos não estão funcionando, pelo menos eu não consegui.

  25. Carlos Henrique (S.Luís-MA)

    agosto 22, 2015 at 11:07

    PARTE DO CÓDIGO 1

    $.ajax({
    	type: 'post',
    	dataType: 'json',
    	url: 'get_solicitacoes.php',
    	async: true,
    	data: {id_pesquisa : $('#id_pesquisa').val()},
    	success: function(vetor){
    	   for(var i=0;i<vetor.length;i++){
               //Adicionando registros retornados na tabela
    	   $('#tabela tbody').append
                     ('td>'+vetor[i].descricao_solicitacao+
                     ''+vetor[i].data_solicitacao+
                     ''+vetor[i].flag_atendida+'');
    	    }
    	}
    });

    ARQUIVO: get_solicitacoes.php

    __ É isso ai:
    A parte 01 do Ajax não manda nada para o arq. PHP.
    Lembrando que coloquei no

Deixe uma resposta

Your email address will not be published.

*