I'm doing some html / css / javascript pages and they will all have the same header and footer, I would like to know how to do the import without repeating all the code.
Server in java. But can you do it in a simplistic way?
"import" header and footer on all pages
2
asked by anonymous 23.06.2017 / 22:40
3 answers
3
Below is an example using Jquery , where on each page you will have to use more or less the structure below, of course there is something that can be improved, such as this function in a .js , specific file.
Using the load function of JQuery, I am able to load an html structure inside an identifier, thus placing the header first and then the footer after all.
So I set it inside the html header.html, only a <p> Header</p> and within footer.html, a <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>
Generating result:
Header
body
Footer
I hope it helps, anything comments that I clarify more.
23.06.2017 / 23:20
4
You can do it with Ajax, even without jQuery , so importing a relatively large lib just to do something simple seems a bit of an exaggeration, unless you already use jQuery for other things.
A very simple example would look something like this:
<!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>
However it is important to think about the re-disposition of the elements or a possible loss of packages in the download can make you feel that the page is broken as soon as it is not downloaded. loading via ajax) from the header and footer.
I really recommend doing this on the server, see which framework (or technology) it uses, this will make it necessary to make only one request instead of 3.
24.06.2017 / 00:05
1
You could do this with jQuery. Put this code in 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>
23.06.2017 / 23:24