Look, I'd like to load the "head" part of my html into just one file and then call in html through java script.
Today I have following:
Header
Filewhereyouwouldliketoinserttheheader
IneedtoinsertthesameviajavascriptbecauseIwillusethesameheaderinseveralplaces.
Iresearchedtheinternetandtheyreturnedsomethinglike
$("#header").load("index.html");
But I'm not going to insert into a div but rather into the html itself.
Leave the internal contents of <head> in your external file and use <link rel="import" href=""> to do the include.
<!DOCTYPE html>
<html lang="en-US">
<head>
<link rel="import" href="/head.html">
</head>
</html>
You can use JavaScript's .insertBefore method to create a tag <head> before body and pull via Ajax the contents of the other file and send into that <head> , but you have to make some considerations:
When you do does not insert the <head> tag directly into HTML, the browser automatically corrects and inserts <head></head> into the document. Therefore, by dynamically inserting a <head> tag, the document will have <head> duplicate tags (one created by the browser and the other inserted via .insertBefore ).
Then you might ask, " why create a
<head>if the browser already create? "As I do not know if everyone browsers do this, it would be a precautionary approach.
Put in the file head.html only the contents of <head> , without the <!doctype> and <html> tags. This is because the <!doctype> tag defines the document type of the page and can not be inserted dynamically. With this the index.html structure would have to be:
<!DOCTYPE html>
<html lang="eng">
<!-- AQUI SERÁ INSERIDA A <head> -->
<body>
CONTEÚDO
</body>
</html>
And of file head.html only contents of <head> :
<meta charset="utf-8">
...
<link href="arquivos/dashboard.css" rel="stylesheet">
Another point is that if you intend to use Ajax, it will only work under HTTP protocol, that is, in a server environment.
Considering the above points, a solution using JavaScript Ajax (no jQuery required) is suggested below:
document.addEventListener("DOMContentLoaded", function(){
var novo_head = document.createElement("head"); // cria o nó <head></head>
var htMl = document.querySelector("html"); // seleciona o elemento html
htMl.insertBefore(novo_head, htMl.childNodes[0]); // insere o nó <head></head> antes do body
var http = new XMLHttpRequest(); // cria o objeto XHR
http.open("GET", "head.html"); // requisita a página .html
http.send();
http.onreadystatechange=function(){
if(http.readyState == 4){ // retorno do Ajax
var head = document.querySelectorAll("head"); // seleciona os <head>
// insere a resposta no primeiro <head>
// o índice [0] significa o primeiro elemento
// o replace é para remover as tags <head> e </head> da resposta
head[0].innerHTML = http.responseText.replace(/<\/?head>/g, "");
// remover a segunda tag <head> do DOM se existir duas,
// para que não haja tags duplicadas
if(head.length > 1) head[1].remove();
}
}
});
As the code already creates the <head> tag with document.createElement("head") , it would be interesting that the .head.html file also did not have the <head> and </head> tags, ie only the internal HTML of <head> . So you can exclude from the code .replace in http.responseText.replace(/<\/?head>/g, ""); leaving only http.responseText; .
If you are going to use jQuery, you can use the $ .get function to send the return to the <head> tag created with the .before() method.
For jQuery, you do not have to worry about duplicating the <head> tag, because even if the tag is added by the browser, jQuery does not duplicate it.
The structure of index.html would be (loading jQuery):
<!DOCTYPE html>
<html lang="eng">
<!-- AQUI SERÁ INSERIDA A <head> -->
<body>
CONTEÚDO
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><script>$(function(){$.get("head.html", function(data){
$("body").before("<head></head>"); // insere o <head> antes do <body>
data = data.replace(/<\/?head>/g, "");
$("head").html(data); // insere o retorno do Ajax dentro da <head>
});
});
</script>
</body>
</html>
As said,
.replace(/<\/?head>/g, "")is to remove from return the tags<head>and</head>, but even if the return comes with these tags, browser corrects, but I putreplaceas a precaution, because I do not know if all browsers do this automatic correction. But the ideal is that the return come without these tags, as said also.
Is your application pure HTML and javascript? will not use anything server side? if it is, create the header file. with the separate header content o add it via INCLUDE of the language you are using,
Tip, usually leave the Header and Footer on the page, and change their content, so you would create a "layout.html" with the structure.
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
e aqui você coloca os conteudos das suas paginas
</body>
</html>
You can easily use jquery because it will have the tag Body, can do
<body>
$("#header").load('paginaativa.html');
</body>
Try to do this!
<head id="header">
</head>
<script type="text/javascript">
$(document).ready(function(){
setTimeout(function(){
$("#header").load("header.html");
},0); });
</script>