Looking for advise on whether is it possible to have a footer.html and duplicate it to all pages without using PHP.
I know I can use include("footer.php"), but all my pages are in HTML now and I will have to change all css paths.
I read up w3school on how to use w3-include-html & javascript. However I realize the javascript is lagging every pages, making page loading longer.
Is there any other option?
<body>
<script>
function includeHTML() {
var z, i, elmnt, file, xhttp;
/* Loop through a collection of all HTML elements: */
z = document.getElementsByTagName("*");
for (i = 0; i < z.length; i++) {
elmnt = z[i];
/*search for elements with a certain atrribute:*/
file = elmnt.getAttribute("w3-include-html");
if (file) {
/* Make an HTTP request using the attribute value as the file name: */
xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4) {
if (this.status == 200) {elmnt.innerHTML = this.responseText;}
if (this.status == 404) {elmnt.innerHTML = "Page not found.";}
/* Remove the attribute, and call this function once more: */
elmnt.removeAttribute("w3-include-html");
includeHTML();
}
}
xhttp.open("GET", file, true);
xhttp.send();
/* Exit the function: */
return;
}
}
}
</script>
<div w3-include-html="footer.html"></div>
<script>
includeHTML();
</script>
You could think different, but I don't know if it is, what you want, because the architecture of your application will grow up / become a littlebit ugly.
You define a php-script, that is loading your static html and appends the php-code you want. Then you need a rewrite rule, to get the script as the center of your tiny html-universe ;-)
An example, that should work on an apache with rewrite-mod enabled.
Mention, that you create this directory-structure on your server:
Place an .htaccess in the root-folder:
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond "%{REQUEST_URI}" !^.*/index\.php$
RewriteRule ^(?!.*index\.php)(.*)$ /index.php/$1 [QSA,L]
Place an index.php in the samefolder:
<?php
... here could be your header-code
define ('PAGES_DIR', __DIR__ . '/html-pages')
define ('DEFAULT_PAGE', 'index.html')
// we need to handle virtual pathes
$requestPath = false;
if (isset($_SERVER['PATH_INFO'])) {
$requestPath = $_SERVER['PATH_INFO'];
} elseif (isset($_SERVER['ORIG_PATH_INFO']) && strpos($_SERVER['ORIG_PATH_INFO'], basename(__FILE__)) === FALSE) {
$requestPath = $_SERVER['ORIG_PATH_INFO'];
}
if ($requestPath == '/' || strlen(trim($requestPath)) == 0 || strlen(trim($requestPath)) == basename(__FILE__)) {
$requestPath = DEFAULT_PAGE;
}
// this sends the content of your file to the browser
@readfile(PAGES_DIR . "/$requestPath");
... now your footer-code
And your html-files needs be placed into the "html-pages"-folder.
If you have done, your server should handle http://domain.tld/bla-fasel-blub.html as followed:
I hope it helps, generating an idea for your problem.