Problem
I’d like to make a set of header and footer pages that can be used on several html sites.
Javascript is something I’d like to use. Is it possible to accomplish this using simply HTML and JavaScript?
I’d like to insert a header and footer page into another html page.
Asked by Prasanth A R
Solution #1
This is something that jquery can help you with.
Place this code in index.html
<html>
<head>
<title></title>
<script
src="https://code.jquery.com/jquery-3.3.1.js"
integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
crossorigin="anonymous">
</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>
and include this code in header.html and footer.html, as well as index.html.
<a href="http://www.google.com">click here for google</a>
You should now be able to click the link tags while visiting index.html.
Answered by Hariprasad Prolanx
Solution #2
I use Server Side Includes to include common elements like the header and footer. No HTML and no JavaScript is needed. Instead, the webserver automatically adds the included code before doing anything else.
Simply add the following line where you want your file to be included:
<!--#include file="include_head.html" -->
Answered by The Conspiracy
Solution #3
Is it necessary to use an HTML file structure while using JavaScript? Have you considering switching to PHP in order to take use of the simple PHP include object?
If you rename your.html pages to.php, you may include the text from your header.php file in one line of code at the top of each of your.php pages.
<?php include('header.php'); ?>
To include the content from your footer.php file in the footer of each page, repeat the process.
<?php include('footer.php'); ?>
There’s no need for JavaScript, Jquery, or any other included files.
NB You could also use the following code in your.htaccess file to convert your.html files to.php files.
# re-write html to php
RewriteRule ^(.*)\.html$ $1.php [L]
RewriteRule ^(.+)/$ http://%{HTTP_HOST}/$1 [R=301,L]
# re-write no extension to .php
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^([^\.]+)$ $1.php [NC,L]
Answered by SolaceBeforeDawn
Solution #4
(load essentials.js:) is another option.
Answered by JustinM
Solution #5
This is what I tried: Make a file called header.html that looks like this:
<!-- Meta -->
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<!-- JS -->
<script type="text/javascript" src="js/lib/jquery-1.11.1.min.js" ></script>
<script type="text/javascript" src="js/lib/angular.min.js"></script>
<script type="text/javascript" src="js/lib/angular-resource.min.js"></script>
<script type="text/javascript" src="js/lib/angular-route.min.js"></script>
<link rel="stylesheet" href="css/bootstrap.min.css">
<title>Your application</title>
Include header.html in your HTML pages now, as follows:
<head>
<script type="text/javascript" src="js/lib/jquery-1.11.1.min.js" ></script>
<script>
$(function(){ $("head").load("header.html") });
</script>
</head>
Works perfectly fine.
Answered by Asheesh Gupta
Post is based on https://stackoverflow.com/questions/18712338/make-header-and-footer-files-to-be-included-in-multiple-html-pages