Place the content you need to share between other HTML pages in a separate HTML file and load the content with Javascript.
//index.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" dir="ltr" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title></title>
</head>
<body bgcolor="#FFFFFF" onload="loadWholePage('anotherpage.html')">
<script src="ajax.js" type="text/javascript"></script>
<script src="responseHTML.js" type="text/javascript"></script>
<div id="storage" style="display:none;">
</div>
<div id="displayed">
</div>
</body>
</html>
//ajax.js
function createXHR()
{
var request = false;
try {
request = new ActiveXObject('Msxml2.XMLHTTP');
}
catch (err2) {
try {
request = new ActiveXObject('Microsoft.XMLHTTP');
}
catch (err3) {
try {
request = new XMLHttpRequest();
}
catch (err1)
{
request = false;
}
}
}
return request;
}
//responseHTML.js
function getBody(content)
{
test = content.toLowerCase(); // to eliminate case sensitivity
var x = test.indexOf("<body");
if(x == -1) return "";
x = test.indexOf(">", x);
if(x == -1) return "";
var y = test.lastIndexOf("</body>");
if(y == -1) y = test.lastIndexOf("</html>");
if(y == -1) y = content.length; // If no HTML then just grab everything till end
return content.slice(x + 1, y);
}
function loadHTML(url, fun, storage, param)
{
var xhr = createXHR();
xhr.onreadystatechange=function()
{
if(xhr.readyState == 4)
{
if(xhr.status == 200)
{
storage.innerHTML = getBody(xhr.responseText);
fun(storage, param);
}
}
};
xhr.open("GET", url , true);
xhr.send(null);
}
function processHTML(temp, target)
{
target.innerHTML = temp.innerHTML;
}
function loadWholePage(url)
{
var y = document.getElementById("storage");
var x = document.getElementById("displayed");
loadHTML(url, processHTML, x, y);
}
// anotherpage.html
<html>
<head>
<title>HTML page</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body bgcolor="#FFFFFF">
<p>
<b>Lorem Ipsum<br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut quis ligula tortor. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Phasellus odio nibh, dapibus et vulputate a, maximus sed nisi. Mauris pellentesque lobortis nunc, et rhoncus metus feugiat sit amet. Etiam nibh massa, dapibus sit amet ultricies vehicula, faucibus ac erat. Etiam vulputate auctor sapien, a condimentum leo aliquam vel. Vivamus placerat dolor a iaculis feugiat. Proin sollicitudin vel sem ut fermentum. Mauris luctus libero arcu, a rhoncus sem sodales in. Integer dolor arcu, condimentum et elementum vitae, lacinia at enim. Sed non odio purus. Maecenas efficitur placerat felis. Vestibulum ullamcorper sit amet urna eget gravida. Morbi id eleifend lacus.
</b>
</p>
</body>
</html>
Reference:
https://www.xul.fr/ajax/responseHTML-attribute.php
Take a look at this topic see if it helps https://answall.com/questions/69710
– Augusto Vasques
Put HTML between `, so you can use broken lines smoothly
– Costamilam
I’m not sure I understand what you need. But because you do not make a file with the base template(header,footer,etc) and then inside the body you insert, using js, the content of the page
– Otavio Souza Rocha