How to deal with a static header/footer with 10+ pages?

Question

How do I deal with a static header/footer that doesn't change within my 10+ pages. Keep in mind all these pages share the same header/footer. So currently If I change one content from the header/footer I would need to go to all other pages in order to make the same changes.

What I'm hoping to achieve is basically to change once and have the change reflected on all pages.

I was thinking of adding the header/footer (HTML) in a .txt file and calling that .txt file JavaScript way. But I'm pretty sure its bad practice and a security risk to have html in a .txt file and too call that .txt file through js.

when I have this same situation, I make the pages in PHP (one for header, one for footer) and include them in all the other 10 pages. Is that a possibility for you? — blurfus, May 19 '16 at 05:08
Ah, I see... you could use jQuery's `.load()` function just keep in mind this will add two additional calls to the server on every page request. (http://api.jquery.com/load/) — blurfus, May 19 '16 at 05:16
Yea jquery might be the best option. Wondering if this solution is considered a good practice. — john, May 19 '16 at 05:22
It's not a bad practice, that's what AJAX calls do day in/out. If you have a high-traffic site, you might want to minimize the number of calls made to the server but now we are talking performance/optimization. — blurfus, May 19 '16 at 05:24
You Right @ochi whish I could also give you some points for the help and answers. — john, May 19 '16 at 05:27
I converted my comment into an answer just in case you needed some sample code on how to do it. — blurfus, May 19 '16 at 05:52

score 1 · Accepted Answer · edited May 23 '17 at 11:59

1

You need to create separate header and footer html files and than need to include these files on all pages. In this way you can control this.

Check below how to include an html file in another html file

http://www.w3schools.com/howto/howto_html_include.asp

Include another HTML file in a HTML file html-file

http://www.hongkiat.com/blog/html-import/

Another way you can create php files instead of html and include common php files in another easily

http://www.w3schools.com/php/php_includes.asp

edited May 23 '17 at 11:59

Community

1
1

answered May 19 '16 at 05:09

Deepak Dholiyan

1,774
1
20
35

Any security issues I should be worried about in terms of including a html file inside another html? – john May 19 '16 at 05:17
@john It's a really broad question but if you are using server-side technologies, not really (that's how large sites are built anyway) – blurfus May 19 '16 at 05:21
Ya .. No big issue. You are going to use append header and footer in PHP (server side) and the output will always be a single page not an iframe. So, no security gap. – Atul Sharma May 19 '16 at 05:42

score 0 · Answer 2 · answered May 19 '16 at 05:33

You could use an angular directive.

var myApp = angular.module('myApp', []);

myApp.directive('mainNavigation', function(){
  return {
    restrict: 'E',
    templateUrl: 'partials/navigation.html'
  }
});

Then you would use ng-app="myApp to call angular and then include the directives in the areas you need them. In this case you would have:

<main-navigation></main-navigation>

score 0 · Answer 3 · answered May 19 '16 at 05:51

You could use jQuery's .load() function.

Just keep in mind this will add two additional calls to the server on every page request. (api.jquery.com/load)

// add this snippet somewhere in your page (inside <script> tags)
$(function() {
  $("header").load("header-url");
  $("footer").load("footer-url");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<header>
  Header
</header>
<hr/>
<div id="content">
  static page content goes here
</div>
<hr/>
<footer>copyright</footer>

How to deal with a static header/footer with 10+ pages?

3 Answers3