9

Estou desenvolvendo uma página HTML pra mobile e estou com a seguinte dúvida: tem como carregar uma página dentro de outra?

Por exemplo:

pagina.html:

        <div class="container22">

        <div id="sidebar">
        <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">Explore</a></li>
            <li><a href="#">Users</a></li>
            <li><a href="#">Sign Out</a></li>
        </ul>
        </div>

        <div class="list bar bar-header">
          <a class="button button-icon icon-right ion-close" onclick="exitFromApp();"></a>
           <h1 class="title">Lwart</h1>

            <a class="button button-icon icon-right ion-gear-b" href="#" data-toggle=".container22" id="sidebar-toggle"></a>
        </div>  

No código acima estou carregando primeiro minha lista de opções de páginas, que até o momento é só um exemplo.

Tem um CSS e um JS por trás disso, que faz essa lista ser carregada como um side menu. Porém, creio que não vem ao caso, e sim que após isso quero adicionar o carregamento de páginas externas.

Por exemplo: ao usuário clicar no elemento home da minha lista, ele deve carregar a página home.html abaixo, em uma div.

Eu dei uma olhada mas não estou certo se isso é feito com Ajax, certo? Tô meio perdido e como não conheço muito de Ajax, resolvi ver se alguém aqui me dá uma luz.

3
  • Não seria mais simples (e mais rápido) colocar todo o conteúdo destas páginas dentro das divs e simplesmente alterná-las com jQuery ou JavaScript? Algo como o código desta resposta do SOen (como o link do fiddle desta resposta não estava funcionando, criei um com o código postado: jsfiddle.net/gustavox/tcrkcbt8)
    – gustavox
    23/07/2015 às 0:20
  • Aqui tem outro exemplo: jsfiddle.net/TLBvx/1
    – gustavox
    23/07/2015 às 0:29
  • pode até ser mais rápido porem conforme vou aumentando a pagina vai virar uma grande confusão. Por isso queria deixar as coisas separadinhas. E já to me complicando com umas 6 paginas separadas se juntar tudo ai pronto kkkk
    – user24203
    24/07/2015 às 0:06

2 Respostas 2

5

Você pode usar o post/get do ajax, coloque a URL de sua action/página, seus parâmetros se for o caso e defina a success function do método, no caso ele pega o que foi retornado e joga pra dentro da div

$.post('home.html', function (html) {
    //Essa é a função success
    //O parâmetro é o retorno da requisição 
    $('#idSuaDiv').html(html);
});
3
  • Estou respondendo isso pelo celular, então me desculpe pela má formatação 23/07/2015 às 0:35
  • Valeu brother. Não entendi muito bem ou não tenho tanto conhecimento assim kk mas segui essa dica [tedk.com.br/blog/html/… mas não deu muito certo pois tive o erro: XMLHttpRequest cannot load <meu arquivo html>. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource.
    – user24203
    23/07/2015 às 23:27
  • funcionou a solução encontrada do link, creio que houve algum problema no navegado em primeiro momento
    – user24203
    30/07/2015 às 13:26
5

Fazendo uso do jQuery ficaria assim:

<!DOCTYPE html>
<html>
<head>
    <title>Exemplo</title>
    <meta charset="utf-8" />
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />    
    <script type="text/javascript" src="js/js_1.9/jquery-1.8.2.js"></script>  
    <script type="text/javascript" src="js/js_1.9/jquery-ui-1.9.1.custom.min.js"></script>  

    <style type="text/css"> #conteudo { width: 400px; height: 300px;} </style> 
</head>
<body>    
     <div id="sidebar">
        <ul>
            <li><a onclick="carregar('home.html')" href="#">Home</a></li>
            <li><a onclick="carregar('explore.html')" href="#">Explore</a></li>
            <li><a onclick="carregar('users.html')" href="#">Users</a></li>
            <li><a onclick="carregar('signOut.html')" href="#">Sign Out</a></li>
        </ul>
    </div>
    <div id="conteudo"></div>
</body>
<script>
    function carregar(pagina){
        $("#conteudo").load(pagina);
    }
</script>
</html>
4
  • tive o seguinte erro: XMLHttpRequest cannot load <minha pagina>. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource.
    – user24203
    23/07/2015 às 23:22
  • @user24203 esta mesclando o protocolo http com https ? 24/07/2015 às 19:29
  • se estiver com o link em http, a sua pagina tem que buscar um http, se estiveres em https tem que buscar https, não pode mesclar 24/07/2015 às 19:30
  • cara muito obrigado! vc mostrou o que eu venho procurando a muito tempo... um código que funcione sem o uso de php! pois estou otimizando meus servidores e o mínimo de requisições que eu fizer, melhor pro meu desempenho! Eu até fiz um código um pouco parecido seguindo a mesma lógica mas apresentava algumas falhas.. enfim... Grato de verdade! Abraço!
    – user33175
    23/09/2015 às 20:31

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 .