3
I am making some html/css/javascript pages and all will have the same header and footer, I would like to know how to make the import without repeating all the code.
Java server. But you can do it in a simplistic way?
3 answers
5
Below is an example using Jquery, where on each page will have to use more or less the structure below, of course there is something that can be improved, as this function in a file .js, specific.
Using the function load of Jquery, I can load an html structure inside an identifier, thus placing on the page before all the header, and after all the footer.
So I set inside the html header.html, only one <p> Header</p> and within the 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 the result:
Header
body
Footer
I hope it helps, anything comments that I clarify more.
-
Boy, it didn’t work out here :(
4
It is possible to do yes with Ajax, even without jQuery, After all 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 be 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-layout of the elements or a possible loss of packages in the download may cause the feeling that the page is broken in how much is not downloaded (loading via ajax) of the header and footer.
I really recommend asking this question on the server, see what framework (or technology) you use, this will make you need to make only one request instead of 3.
1
You could do this with jQuery. Put this code on 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>
Browser other questions tagged html css front-end
You are not signed in. Login or sign up in order to post.
What language do you have on the server?
– Sergio
@Sergio is in java, but would like to do in javascript if possible..
– Isa
You can do this in Javascript with ajax, or by loading a script with html strings, but it seems simpler to do it on the server. At least until HTML Imports arrive.
– Sergio
Can be using View with Angularjs ?
– David
@david unfortunately did not
– Isa
and with Jquery can be?
– David
@david can yes!!
– Isa
What technology/framework do you use on the server side? It is possible to do yes with the suggestions of Ajax (even without jQuery), still the re-layout of the elements or a possible loss of packages in the download can cause the feeling that the page is broken when the download is not done (loading via ajax) header and footer.
– Guilherme Nascimento