27

Cenário: Estou montando um layout, que será utilizado por terceiros e não sei qual será a linguagem utilizada. Tenho duas divs, um será o menu esquerdo e outro o conteúdo. Eles são separados por um Splitter, minhas dúvidas são:

  1. Esse menu esquerdo, quero desenvolver um html a parte e chama-lo por include, qual a melhor forma de fazer?

  2. Se eu fizer chamada via javascript será que terei problemas com javascript contido nessa página que será inserida?

  3. Existe algum padrão desse tipo no HTML5, CSS ou alguma forma simples de implementar em JavaScript?


Sei que iframe não é uma boa solução. Através de <object type="text/html" data="include.html"></object>, funciona mas creio que não seja uma boa solução também.

6
  • 1
    Provavelmente seria bom você fazer tudo separado, mas juntar num modelo pra entregar, com comments para o programador <!-- inicio do conteudo do menu.htm - trocar por include -->... ai poe o html do menu.htm...<!-- fim do conteudo do menu.htm -->, creio que seja mais simples. Aí o cliente ve funcionando, e o programador troca depois. (ou seja, forneça tudo separado, e mais um arquivo mesclado de demonstração)
    – Largato
    Commented 11/04/2014 às 19:38
  • exato, estou com medo de fazer algo para tentar separar e no final ficar tudo confuso.. tipo fazer um gigante código js para chamar os includes..vai achar q é necessário..enfim.. gostaria de saber se já existe algo em html5 pesquisei e não achei nada que funcione!
    – Dorath
    Commented 11/04/2014 às 19:41
  • E tem outra, dessa forma que eu disse, você pode desenvolver no seu ambiente usando os includes da sua linguagem, (basta por os comments que eu mencionei em cima e embaixo de cada include), e na hora de entregar pro cliente você salva o source do browser mesmo como "arquivomontado.html" e entrega junto. Aí ele se vira (claro, se voce puder, explique pro programador o que fez).
    – Largato
    Commented 11/04/2014 às 19:44
  • Não sei se realmente as respostas estão "desatualizadas", mas realmente não tem nenhuma completa, que fale de múltiplas maneiras de resolver o problema. Infelizmente ando sem tempo pra complementar a minha – e parece que o pessoal anda votando cegamente nela porque está no topo...
    – bfavaretto
    Commented 28/08/2017 às 13:49
  • @bfavaretto a sua opção é bem clara e eficiente, desde que tenha um webserver com recurso de server-side... porém como você falou, estou vendo se existem outras opções atualizadas...etc
    – Dorath
    Commented 28/08/2017 às 14:19

4 Respostas 4

31
+50

Se você estiver usando um webserver (por exemplo, o Apache ou o IIS), ele provavelmente suporta Server-side includes. Com isso você poderia usar, no HTML principal:

<!-- #include file="caminho-do-menu.html" -->
2
  • 1
    nossa esse é tão antigo e simples que tinha até me esquecido...ótimo..
    – Dorath
    Commented 11/04/2014 às 21:04
  • 1
    Atento, mas daí não pode ser apenas HTML, terá que ser um ASP ou PHP para executar ServerSide. Pela pergunta, a solução deve ser ClientSide. Commented 23/08/2017 às 12:25
16

Não sei se eu entendi direito, mas se for isso mesmo, e como você marcou a tag , então porque não usar o load:

$("#idElemento").load('xpto.html');

Se o conteúdo for estático, entretanto, é melhor processar no servidor, ver a resposta do @bfavaretto.

6
  • 1
    Outra opção client-side para quem não quer lidar diretamente com JavaScript (ainda está lá, mas debaixo dos panos) é o csi.js. <div data-include="me-inclua.html"></div>. Dito isso também vou na resposta no bfavaretto, na maioria dos casos server-side includes são uma opção melhor por usarem menos banda, não fazer o cliente ter que pagar a latência de múltiplos requests. etc. Commented 11/04/2014 às 20:17
  • 1
    e sabe se ele dará muitos problemas se a pagina incluída tiver javascript? tipo conflitos etc? ou ele vai bem?
    – Dorath
    Commented 11/04/2014 às 21:04
  • 1
    Os scripts serão executados como se estivessem na página principal... obviamente, que a ordem de execução vai variar, de acordo com quando o load será executado. Commented 11/04/2014 às 21:14
  • 2
    Além disso, o html incluido deverá ser um fragmento de html, e não um documento HTML completo, com head, body, etc.. senão seria o mesmo que adicionar tudo isso dentro da div... imagina: <div><html><head>...</head><body>...</body></html></div> o que não faz sentido. Commented 11/04/2014 às 21:16
  • 2
    Achei, é assim: $("#idElementoDaPaginaMaster", "pagina.html #idElementoDaPaginaIncluida") Commented 11/04/2014 às 21:18
5

A forma que os desenvolvedores estão explorando são geradores que fazem isso para você. Temos alguns bons como o Jekyll e o Middleman. Eu escolhi utilizar o Jekyll e ele me ajuda muito com uma linguagem que independente do programador, a compreensão do algoritmo fica fácil. Por exemplo, quanto tenho uma página inicial que tem 10 produtos, eu faço 1 modelo de como seria e um for para iterar essa repetição.

Exemplo do Jekyll:

<div class="produtos">
    {% for i in (1...9) %}
            <div class="product-align">
                <div class="product" itemscope itemtype="http://schema.org/Product">
                    <img itemprop="image" class="product-image center-block" alt="imagem produto" src="assets/images/produto01.png">
                    <p class="product-title" itemprop="name">Cadeira Tulipa</p>
                    <p class="product-review" itemprop="review">Clássica criação de Pierre Paulin</p>


                    <div class="price" itemprop="offers" itemscope itemtype="http://schema.org/Offer">
                    <!-- div que separa itens referente ao preço de cada produto -->
                        <p class="product-price">De: R$2,999.00</p>
                        <!-- preço original -->
                        <p class="final-product-price" itemprop="price">Por: R$2,000.</p>
                        <!-- preço com desconto -->
                        <p class="parcel-product-price">Ou até 6x de R$250,00.</p>
                        <!-- preço parcelado -->
                    </div>

                    <a href="produto.html">
                        <button class="btn-see-more" type="button">Veja mais</button>
                    </a>

                </div>
            </div>
    {% endfor %}
</div>

O Jekyll te permite enviar o HTML junto como se fosse uma espécie de "merge" de páginas e permite você enviar como eu mandei acima. Você pode enviar as 2 formas para o cliente e ele cuida de todo o resto. Essa é a forma mais indicada.

2

Uma solução elegante seria usar algum framework javascript como Vue, Angular e etc..

Pois eles ja vem com uma estrutura bacana para se trabalhar de tal forma.

Uma vez que vocês precisa de ambientes diferentes na mesma página, na web moderna costumamos criar o web site com conceito de componentização. Pode ser uma solução agradável para seu problema.

Exemplo

O melhor exemplo para isso são as referencias diretas no site da framework onde você poderá ver e ler afundo sobre o assunto

Comunidade Vue.js

Curso Vue.js parte 1: construindo Single Page Applications

Github Vue.js

Site oficial Vue.js

2
  • você poderia dar um pequeno exemplo de como funciona?
    – Dorath
    Commented 28/08/2017 às 14:20
  • Preparei algumas referências para dar ponto de partida a partir daqui, leia sobre, entenda o conceito, faça aplicações teste que você vai pegar o jeito. Falei do vue porque eu pessoalmente prefiro, mas tem Angular e React pra dar uma olhada também Commented 29/08/2017 às 12:55

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 .