3

Estou fazendo algumas páginas html/css/javascript e todas terão o mesmo cabeçalho e rodapé, gostaria de saber como faço para fazer a importação sem repetir todo o código.

Servidor em java. Mas tem como fazer de uma forma simplista?

8
  • Que linguagem tens no servidor?
    – Sergio
    Commented 23/06/2017 às 20:41
  • @Sergio é em java, mas gostaria de fazer em javascript, se possível..
    – Isa
    Commented 23/06/2017 às 20:43
  • Podes fazer isso em JavaScript com ajax, ou carregando um script com strings de html, mas parece-me mais simples fazer no servidor. Pelo menos até chegarem os imports de HTML.
    – Sergio
    Commented 23/06/2017 às 20:43
  • Pode ser utilizando View com angularJS ?
    – David
    Commented 23/06/2017 às 20:50
  • @david infelizmente não
    – Isa
    Commented 23/06/2017 às 20:52

3 Respostas 3

5

Segue abaixo um exemplo utilizando Jquery, onde em cada página terá que utilizar mais ou menos a estrutura abaixo, claro tem coisa que pode ser melhorado, como essa função em um arquivo .js, especifico.

Utilizando a função load do JQuery, consigo carregar uma estrutura html dentro de uma identificador, assim colocando na página antes de tudo o header, e após tudo o footer.

Assim defini dentro do html header.html, somente um <p> Header</p> e dentro do footer.html, um <p>Footer</p>.

<HTML>
      <head>
              <script src="jquery-3.2.1.min.js"></script>
               <script>
                      $(function(){ 
                                $("#header").load("header.html");
                                $("#footer").load("footer.html"); 
                       });
                 </script>
       </head>
       <body>

                <div id="header"></div>

                <h1>body</h1>

                <div id="footer"></div>
        </body>
 </HTML>  

Gerando o resultado:

Header

body

Footer

Espero que ajude, qualquer coisa comenta que esclareço mais.

1
  • poxa, aqui não deu certo :( Commented 12/07/2018 às 16:43
4

É possível fazer sim com Ajax, mesmo sem jQuery, afinal importar uma lib relativamente grande só pra fazer algo simples me parece um pouco de exagero, a não ser que já use jQuery para outras coisas.

Um exemplo bem simples seria algo mais ou menos assim:

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>

    <header id="mainheader"></header>

    <div id="contaner"></div>

    <header id="mainfooter"></header>

    <script type="text/javascript">
    carregaDocumento("cabecalho.html", "#mainheader");
    carregaDocumento("rodape.html", "#mainfooter");

    function carregaDocumento(arquivo, target)
    {
        var el = document.querySelector(target);

        //Se o elemento não existir então não requisita
        if (!el) return;

        var xhr = new XMLHttpRequest();
        xhr.open("GET", arquivo, true);
        xhr.onreadystatechange = function(){
             if (xhr.readyState == 4 && xhr.status >= 200 && xhr.status < 300){
                  el.innerHTML = xhr.responseText;
             }
        };

        xhr.send(null);
    }
    </script>
</body>
</html>

No entanto é importante pensar na questão da re-disposição dos elementos ou uma possível perda de pacotes no download podem tornar causar a sensação de que a página esta quebrada em quanto não for feito o download (carregamento via ajax) do header e do footer.

Realmente recomendo fazer esta questão no servidor, veja qual framework (ou tecnologia) usa, isso vai fazer com que precise fazer apenas uma requisição ao invés de 3.

1

Você poderia fazer isso com jQuery. Coloque esse código em index.html

<html>
   <head>
      <title></title>
      <script src="//code.jquery.com/jquery-1.10.2.js"></script>
      <script>
         $(function () {
            $("#header").load("header.html");
            $("#footer").load("footer.html");
         });
      </script>
   </head>
   <body>
      <div id="header"></div>
      <!--Remaining section-->
      <div id="footer"></div>
   </body>
</html>

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 .