6

Como trocar de páginas internamente sem alterar a URL pro usuário? Sem utilizar frames.

Exemplo: O usuário entrou no meu site: http://exemplo.com e clicou no menu e foi pra página "Contato".

Fazer com que a URL continue: http://exemplo.com, mesmo a página atual sendo http://exemplo.com/contato.html

8
  • 2
    Com estas especificações que você deu apenas com ajax Commented 2/07/2014 às 19:11
  • 2
    Você pode até simular isso com a api de history, mas provavelmente terá em algum momento efeitos colaterais indesejados. pt.stackoverflow.com/a/16799/70
    – Largato
    Commented 2/07/2014 às 19:18
  • 1
    Já tentou usar ember.js ? Pode ser útil! Commented 2/07/2014 às 19:20
  • 1
    Outro reparo técnico (1): é usar POST. Assim você teria botões no lugar de links, e na index processaria o valor do POST para definir o conteúdo. Essa funciona mesmo com JS desligado. 1. Gambiarra
    – Largato
    Commented 2/07/2014 às 19:33
  • 1
    Então seria bom se você postasse a solução aqui, se ela funcionar mesmo. Mas... URL Rewrite? Tem certeza? Commented 3/07/2014 às 19:25

4 Respostas 4

3

Recomendo carregar a página que vc quer dentro de uma div

<div id='conteudo'>

E um botão para disparar o evento de carga :

<div id='newConteudo'>

Com a ajuda do jquery:

$('#newConteudo').on('click', function(){
    $('#conteudo').load('subPag.php')
});

neste caso o arquivo subPag.php terá a função montar a nova subPágina considerando que o assunto carregado fará parte de uma página principal que não será recarregada.

O arquivo subPag.php deverá ser tratado como um trecho de página mesmo. Não deverá ter as tags <head> ou <body>, é um trecho da sua página original.

Isto tem suas vantagens:

  • O CSS da página original afeta a subpágina,
  • As funções javascript/jquery a pagina original também podem funcionar na subpágina, contanto que tenha utilizado .on.

Não recomendo carregar muito script na subpágina, pois vai carregando a página principal e facilmente pode gerar conflitos.

Existe ainda outra possibilidade com a carga via $.post. Nesta opção você utiliza de um botão/link para ativar a função, que por sua vez pode enviar alguns dados ou até campos de formulários a um arquivo PHP. este arquivo PHP, por sua vez, processa os dados e retribui via JSON um conjunto de informações. Estas informações podem ser processadas na função de retorno do comando $.post e direcionadas para uma div ou outro local/elemento da página para alteração da página atual. Isto tudo sem alterar a URL do topo da página.

1
  • 1
    Olá @SULBACH, seja bem vindo ao SOPT, editei sua pergunta para adicionar a marcação de amostras de código, que facilita a leitura da resposta. Para mais informações visite a central de ajuda pt.stackoverflow.com/help
    – abfurlan
    Commented 2/07/2014 às 23:08
1

Talvez você queira trabalhar com a troca de links que se a página sofra um reload.. Entendi certo?

O mais aconselhado para esses casos é trabalhar com Deep Linking

Uma ótima biblioteca para trabalhar com o Deep Linking em JS é a SwfAddress da Asual

Você navega entre páginas através de Ajax sem que sua página sofra um reload e ainda coloca um histórico de navegação em sua url que passa a ser trabalhada da seguinte forma:

www.site.com.br

www.site.com.br/#/contato

sendo que em /#/contato a chamada seria ao seu arquivo contato.html

veja um exemplo dessa navegação aqui

2
  • Minha dúvida é não mostrar da "/" pra frente, o usuário só vai ver: site.com/
    – Laerte
    Commented 2/07/2014 às 21:38
  • Nesse caso... Esqueça Deep Linking, histórico, Angular Routing e qualquer outra coisa. Se você não quer MESMO tocar na URL, utilize Ajax puro ou então o "reparo técnico" sugerido pelo @Bacco nos comentários da sua pergunta. Mas voltamos a provocar a discussão: precisa MESMO manter esse URL estático? Páginas simples geralmente não justificam uso do AJAX, pela complexidade adicional, problemas com Search Engine Optimization e o já citado histórico/favorito do usuário. Uma coisa é não indexar os resultados de uma query ou outro conteúdo dinâmico, mas dados estáticos (aos olhos do usuário)? Commented 2/07/2014 às 22:18
1

A melhor maneira de se fazer isso é utilizando o history.js

https://github.com/browserstate/history.js/

É robusto e simples de implementar. Basta fazer o download, adiciona-lo à sua solution e então consumi-lo numa function javascript.

Segue um exemplo funcional de como mudar a URL do seu site após o usuário clicar em algum botão do menu Contato:

HTML

<html>
<head>
    <title>Teste de mudança de URL</title>  
    <link href="http://getbootstrap.com/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<nav class="navbar navbar-default" role="navigation">
  <div class="container-fluid">
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li>
            <button type="button" class="btn" id="btnAdd">exemplo 1</button>
        </li>
        <li>
            <button type="button" class="btn" id="btnRem">exemplo 2</button>                
        </li>                
      </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>
</body>

Javascript - neste caso, carregado no final do código HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://getbootstrap.com/dist/js/bootstrap.min.js"></script>
<script src="http://getbootstrap.com/assets/js/docs.min.js"></script>
<script src="jquery.history.js"></script>
<script type="text/javascript">
    $('#btnAdd').click(function(){ 
        History.pushState({state:1}, "State 1", "?state=1");
    });
    $('#btnRem').click(function(){ 
        History.replaceState({state:2}, "State 2", "?state=2&user=beto");       
    });
</script>
-2

Em javascript nativo da para fazer assim:

<script> document.getElementById("id_da_div_ou_Body").innerHTML = '<object type="text/html" data="arquivo.php" ></object>'; </script>

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