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?
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?
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.
É 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.
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>