0

I am looking for a best approach to include one html file in another. Basically the need is to create one header and footer file which will be included in multiple pages across the app. The header/footer file may contain required css and js. And i may want to include some other templates which i can use for popup etc. I know we can do this by

  • Ajax
  • HTML5 import(not supported in most of the browser. so not useful)

Any other way? or any best way to do which will take care of the performance.

Thanks in advance...

Solution: Just wanted to update here the approach I took for this problem. I am using Grunt. So I use the include plugin available in it which I run during creating build to include different HTML files together. Thanks anyway for your time...

rajesh
  • 2,354
  • 1
  • 12
  • 15
  • You're talking about performance, but seem to be limiting yourself to client-side solutions. Are you able to do any of the required processing on the server and pre-render what you serve up? – James Thorpe Apr 06 '16 at 13:59
  • Are you not using any kind of server framework, like ASP.NET, PHP, or anything like that? Probably every framework has layout pages or similar concepts to let you share headers and footers. – Joe Enos Apr 06 '16 at 13:59
  • I have to make it using HTML as it will eventually move to hybrid app as well where i don't have legacy to use server side components. That's why i want to do it in HTML with the best possible way. Thanks anyway. I am looking into the duplicate question. – rajesh Apr 07 '16 at 05:40

2 Answers2

2
<html>
<head>
<title></title>
<script src="//code.jquery.com/jquery-1.10.2.js"></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>

Include the header.html and footer.html at the same location as index.html

Vinod Bhavnani
  • 2,185
  • 1
  • 16
  • 19
1

I'd use PHP. The "parent" page has to be a .php file, but except of a tiny bit of PHP include command it can exactly look like a HTML page. At the spot where the other file is to be included, use 

<?php
include "my_other_file.php";
?>
Johannes
  • 64,305
  • 18
  • 73
  • 130
  • This would also be my solution, only the extension needs to be .php – izk Apr 06 '16 at 14:00
  • 1
    yes, that's what I wrote in my thext before the code bit. Just made it clearer by adding a dot and code tags... – Johannes Apr 06 '16 at 14:01