Eu não sei se tem um jeito "correto" de fazer isso, mas toma como exemplo o meu site: [Somente usuários registrados podem vem os links. ]
Basicamente oq eu to fazendo aí é utilizando pushState + Ajax e a biblioteca que eu estou utilizando resolve boa parte dos problemas...
Destino do conteúdo
Código:
<div id="conteudo">
Conteúdo aqui
</div>
Código JavaScript (coloca antes do </body>)
Código:
<script src="/assets/js/lib/jquery-pjax.js"></script>
<script>
var pjaxselector = '#conteudo'; // alterar se necessário pro selector certo
$(document).pjax('a:not(a[target="_blank"]):not(a[class*="pjax-bypass"])', pjaxselector, {
timeout: 3000,
scrollTo: false
});
</script>
Exemplo de um link que utiliza ajax
Código:
<a href="/noticias">Notícias</a>
Exemplo de um link que NÃO utiliza ajax (target = _blank)
Código:
<a href="/ext1" target="_blank">Link externo 1</a>
Exemplo de um link que NÃO utiliza ajax (class = pjax-bypass)
Código:
<a href="/ext2" class="pjax-bypass">Link externo 2</a>
Resumindo:
Nesse esquema ai se o cara não tiver javascript, os links vao funcionar como links normais, já se ele tiver a página será carregada via AJAX e o conteúdo colocado na DIV (a url será alterada automáticamente pra poder copiar)
Já no lado do PHP vc vai ter que verificar se é uma requisição AJAX e responder só com o conteúdo da página (sem o template), pq se vc responder com o <html> e tudo mais o pjax vai simplesmente dar reload na página (vai parecer que não funcionou)
Lembra também de referenciar o arquivo certo ali da biblioteca e usar o selector certo pra pegar a div que vc quer que o conteúdo abra.
a biblioteca que eu estou utilizando é a jquery-pjax
[Somente usuários registrados podem vem os links. ]
<extra>
o indicador de loading que eu to utilizando chama PACE
[Somente usuários registrados podem vem os links. ]